I am trying to figure out how to populate other tags with a specific text after selecting from a drop down.
So if the drop down and another drop down below it the following should happen. When you choose "A" from dropDown1, dropDown2 should populate with "You chose A". If you choose "B" dropDown2 should say "You chose B". Same goes for "C"
Here is a sample code below.
<html>
<body>
<form>
<select id="dropDown1">
<option value = "A">A</option>
<option value = "B">B</option>
<option value = "C">C</option>
</select>
<select id="dropDown2">
<option value="You chose A">You chose A</option>
<option value="You chose B">You chose B</option>
<option value="You chose C">You chose C</option>
</select>
</form>
</body>
</html>
Any help would be greatly appreciated. If you could show some code that be awesome or if you could point me in the right direction where I can find the answer that be awesome to.
For predefined values like what you have, you can use the following jQuery/JavaScript code:
$(function() {
$('#dropDown1').change(function(){
$('#dropDown2').val('You chose ' + this.value);
});
});
JS Fiddle here: http://jsfiddle.net/vleong2332/82w7p0a6/
Here is the example to change dropDown1 when dropDown2 changes.
http://jsfiddle.net/vleong2332/82w7p0a6/1/
Here is another option, scaled down from some development I've done. A bit more flexible but also more complex. Pay attention to how the items are tagged with data-* attributes to decide what is hidden and shown. http://jsbin.com/siyexumulu/1/
Related
I was wondering how something like this would work using pure JS or using jQuery (I think if possible through jQuery it would be done faster?). If I have a select drop down list and the user chooses an option, based on that option the next drop down list only has certain options enabled.
Example, I am attending an event in Ontario:
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option value="Toronto West">Toronto West</option>
<option value="Vancouver">Vancouver</option>
<option value="Edmonton">Edmonton</option>
<option value="Toronto East">Toronto East</option>
</select>
So using the above HTML, I would select "ON" for Ontario, and then only Toronto West and Toronto East should show or be enabled. The selected options do not need to be displayed in any other additional areas, the user just needs to make the selections and then move on in the form. My concern is if I have 300 events across the country that will be a long list to go through even with options disabled.
What I've tried: JSFiddle
The issue I see with what I've tried is that there will be a lot && statements...it works but when I have 30, 50, 100+ events I don't think it'll be ideal, also I don't know what to put in the else if I do use that.
---Background information---
A little background info as to WHY I want to try this incase anyone is wondering. I will eventually have up to 170-200 locations and I think it's easier for our users to select the correct venue by disabling options based on province. Originally I had created separate selects for the venues and then hid them all, and depending on which province you chose the select with the events associated with that province would reveal itself.
The js I have for that:
$('#select_province_dropdown').on('change', function() {
if ($("#select_province_dropdown").val() === "AB") {
$(".hideAB").attr("style", "display: block;");
} else {
$(".hideAB").attr("style", "display: none;");
}
});
Now the issue is that the CMS we're using limits the amount of custom fields we can build for our reports, and we have to pay (a lot) to increase that which is not in the budget at the moment. So while this method is simpler and easier for me to understand, I think the other method above that I am trying to figure out how to do is better cost wise because then we have only two custom fields (two selects) which saves the company money that I don't want them to spend just because I'm such a noob, I'd rather they pay for the additional custom fields for something more important.
Assuming you have the ability to add attributes to the venue dropdown, you can add a data attribute specifying which state the venue should be shown for.
Add some CSS that hides the disabled options and change the JavaScript to show only enable options that have the correct data attribute value.
Here is a demo https://jsfiddle.net/kf5tqdw2/6/
HTML
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
<option value="----Select Province----">----Select Province----</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="SK">SK</option>
</select>
<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
<option value="----Select Venue----">----Select Venue----</option>
<option data-for="ON" value="Toronto West">Toronto West</option>
<option data-for="BC" value="Vancouver">Vancouver</option>
<option data-for="AB" value="Edmonton">Edmonton</option>
<option data-for="ON" value="Toronto East">Toronto East</option>
</select>
JavaScript
$('#select_province_dropdown').on('change', function() {
var state = $("#select_province_dropdown").val();
$("#venue_dropdown option").attr("disabled","disabled");
$("#venue_dropdown option[data-for='" + state + "']").removeAttr("disabled");
});
CSS
option[disabled] {
display: none;
}
You can use an 'onclick' function in each option.
<option onclick='show(this)' data-id1='AB' value="AB">AB</option>
Then your 'show function' would set the second menu with the option "id='whatever'" to
style='display:block'
where it was previously set to display:none
I hope this simple solution helps you out.
Set a class on all of your venue locations that matches the province they're located in:
<option class="ON" value="Toronto West">Toronto West</option>
When you select a province pull the value, disable all of the venues then re-enable only the venues that have a class matching the option value.
If I understand the requirement and constraints correctly, and building on #Josh Cronin's solution ...
You might consider showing/hiding #venue_dropdown options, rather than enabling/disabling.
The code is fairly straightforward ...
jQuery(function($) {
var $venue_dropdown = $('#venue_dropdown');
$('#select_province_dropdown').on('change', function() {
$venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
$venue_dropdown.find('option')
.not(':first') // ignore the ----Select Venue---- option
.hide() // hide all venue options
.filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
.show(); // show selected venues
}).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});
DEMO
IMHO this will provide a better User Experience, especially if the list of venues is long.
I would like to use drop down list to choose different kind of time format to filter my report. For now, I use text box prompt and conditional variable help me to jump from DateFormat1, DateFormat2, DateFormat3. Though it work out well now, I need to use drop down list to finish this front page.
I would like to use HTML and JS to achieve it.
This is a drop down and textbox script I write.
<script language="javascript">
function ChooseContact(data) {
document.getElementById ("friendName").value = data.value;
}
</script>
<select onchange="ChooseContact(this)">
<option value="0">Choose Time Format</option>
<option value="1">Billing Cycle</option>
<option value="2">Invoice Date</option>
<option value="3">Shipment Date</option>
<option value="4">Rating Date</option>
</select>
<input id="friendName">
But how to input my list number into text box prompt? Thanks!
In the below code ,i want to click on Baseball game option, but i am unable to click on it
HTML CODE
<option value="" disabled="" selected="">-- Choose Option --</option>
<option value="12">Baseball Game</option>
<option value="1417">Practice</option>
</select>
</div>
Please help me
Hi this is just the HTML Code, you haven't provide your Java Snippet.
Below is an example of how to go about selecting your options
1)
driver.findyElementBy(By.Xpath("//option[#value='Baseball Game']")).click();
2)
WebElement selectElement = driver.findElementBy(By.tagName("select"));
Select selectOption = new Select(selectElement);
selectOption.selectByValue("Baseball Game");
just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody
Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...