I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">
Related
I have the below select tag with two optgroup.
<select id="linkSelector" class="form-control" onchange="linkDropDown();">
<optgroup label="Input">
<option value="default">Road type</option>
<option value="lanes">Lanes</option>
<option value="length">Length</option>
<option value="speed">Speed</option>
</optgroup>
<optgroup label="Ouput">
<option value="congestion">Congestion</option>
<option value="speed_output">Speed</option>
<option value="travel_time">Travel Time</option>
</optgroup>
</select>
I would like to execute myFuncton() depending on the selected optgroup.
For example if one of the dropdown value belong to <optgroup label="Input">, then execute myFunction().
I tried this:
var linkSelector = document.getElementById('linkSelector')
opt = linkSelector.getElementsByTagName('optgroup')
if (opt[0].label =='Input'){
myFunction()
}
One way to go about this, would be to get the selected option for the select field, then find out it's parent's label.
var label = document.getElementById('linkSelector').selectedOptions[0].parentElement.label;
if (label === "Input") {
myFunction();
}
I want to always maintain how to select the second option for its drop downs. The point here is that the value is random:
MyBrowser.document.getElementById("multipleCat_1").Value = "RANDOMVALUE"
How do I select the second option in a drop down menu?
HTML:
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
You can use selectedIndex as below:
document.querySelectorAll('#multipleCat_1 > option')[1].value = 'Got you!';
document.getElementById('multipleCat_1').selectedIndex = 1
console.log(document.getElementById('multipleCat_1').value)
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
<select id="multipleCat_1">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
var options = document.querySelectorAll('#multipleCat_1 > option');
document.getElementById('multipleCat_1').value = options[1].value;
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>
I have list that looks like this:
<select>
<option value="All" selected="selected">- Any -</option>
<option value="16">Africa</option>
<option value="17">Asia</option>
<option value="56">-China</option>
<option value="57">-Japan</option>
<option value="19">Canada</option>
<option value="20">-Alberta</option>
<option value="21">-British Columbia</option>
<option value="22">-Manitoba</option>
<option value="23">-New Brunswick</option>
<option value="24">-Newfoundland & Labrador</option>
<option value="25">-Northwest Territories</option>
<option value="26">-Nova Scotia</option>
<option value="27">-Nunavut</option>
<option value="28">-Ontario</option>
<option value="29">-Prince Edward Island</option>
<option value="30">-Quebec</option>
<option value="31">-Saskatchewan</option>
<option value="32">-Yukon</option>
<option value="33">Central & South America</option>
<option value="34">Europe</option>
<option value="35">Republic of Ireland</option>
<option value="36">United Arab Emirates</option>
<option value="37">United Kingdom</option>
<option value="38">-England</option>
<option value="39">-Northern Ireland</option>
<option value="40">-Scotland</option>
<option value="41">-Wales</option>
</select>
I can't change the HTML, but need to split the select into two selects by jQuery first the show the top level choices then for example if Canada was chosen show a second drop down with the provinces. This has to be dynamic as the underlying list might change with the time.
I understand that it would be much easier if there would be optgroups but unfortunately this is out of my control. So basicly i need to convert this simple list into hierarchical select in the browser.
You can use below query to split continents and countries select box.
NOTE - put id="select" for main select box.
$(function(){
var continent='';
$('#select option:gt(0)').each(function(){
var value = $(this).val();
//check if option text don't have '-' in it, then take it as
// continent and create a select box with same id
if($(this).text().indexOf("-")==-1 && continent!=value)
{
continent=value;
$('#select').after('<select id="'+continent+'" style="display:none" class="country"></select>');
}
else
{
//add option to the newly created select box
$('#'+continent).append($(this));
}
});
//remove all country select box which are empty
$('.country').filter(function(){
return $(this).children().length ==0;
}).remove();
//bind change event to select box to show / hide country select box
$('#select').change(function(){
$('.country').hide();
$('#'+$(this).val()).show();
});
});
DEMO