I have 2 field select.
I want when a value is choose in the first one, the second select will reload and show some values that correspond to the first select.
Example :
States and city :
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA" selected="selected">California</option>
<option value="TX">Texas</option>
</select>
When you choose California reload field select city.
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option value="LA">Los Angeles</option>
<option value="SD">San Diego</option>
...
</select>
And when you choose Texas reload field select city.
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option value="">Dallas</option>
<option value="HT">Houston</option>
...
</select>
I have tried to find some way. But not very effective. Maybe I have no knowledge about it. Can you help and give me an example on jsfiddle?
Thanks very much!
P/s: Oh .I came across it. It is currently visible and hidden when selected. I watched a similar post but was not feasible for my problem. I use wordpress. And the data fields are already available, I just want to reload it to show it. I choose new states but it does not reload the city. I refreshed the web page and it reloaded and displayed a new city field.
You can do something like this:
$('#billing_state').change(function() {
var countrycode = $(this).val();
if (countrycode != "") {
$('#billing_city option').hide();
$('#billing_city option:eq(0)').show();
$('#billing_city option[data-parent=' + countrycode + ']').show();
$('#billing_city').val("")
}
});
Note: I've added data-parent="CA" you the "City" options. Like:
<option data-parent="CA" value="LA">Los Angeles</option>
<option data-parent="CA" value="SD">San Diego</option>
<option data-parent="TX" value="DA">Dallas</option>
<option data-parent="TX" value="HT">Houston</option>
Demo
$('#billing_state').change(function() {
var countrycode = $(this).val();
if (countrycode != "") {
$('#billing_city option').hide();
$('#billing_city option:eq(0)').show();
$('#billing_city option[data-parent=' + countrycode + ']').show();
$('#billing_city').val("")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA">California</option>
<option value="TX">Texas</option>
</select>
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option data-parent="CA" value="LA">Los Angeles</option>
<option data-parent="CA" value="SD">San Diego</option>
<option data-parent="TX" value="DA">Dallas</option>
<option data-parent="TX" value="HT">Houston</option>
</select>
Please find link below:
https://jsfiddle.net/ulric_469/8Lk5w0xn/11/
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA" selected="selected">California</option>
<option value="TX">Texas</option>
</select>
<div>
<select id="second_dropdown" data-placeholder="Please Select">
<option value="">Select an option…</option>
<option value="LA">Los Angeles</option>
<option value="SD">San Diego</option>
</select>
</div>
$("#billing_state").on("change", function(e) {
var currentVal = $(this).val();
if (currentVal === "CA") {
var optn = '<option value="">Select an option…</option><option value="LA">Los Angeles</option><option value="SD">San Diego</option>';
} else if (currentVal === "TX") {
var optn = '<option value="">Select an option…</option><option value="">Dallas</option><option value="HT">Houston</option>';
} else {
var optn = '<option value="">Select an option…</option>'
}
$("#second_dropdown option").remove();
$("#second_dropdown").append(optn);
})
Related
Thanks to lvoely people on this website, I am slowly getting this script to work as I intended. One thing I couldn't figure out is
how to get "State" (select2) to show "Select State" instead straight to options when Country (Select 1) is selected and, simililarly, ""City" to show "Select City" instead of straight to options when "State" (Select2) is selected).
how to make City (select3) to show "Select City" when previously selected "State" (select2) is unselected or changed to another State. Likewise for "State" when previously selected "Country" is unselected or changed to another Country (also for City to change to "Select City" when this happens)
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
The lines
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
remove all options and replace them with only the ones that match the filter - obviously(?) the "please select" (value="") option does not match, so is not included.
You could adjust your filter to include it, or add the blank option to the select after.
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
Refactored for easier calls
$(function() {
init();
reset("#select1", "#select2");
reset("#select1", "#select3");
$("#select1").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select1", "#select2");
reset("#select1", "#select3");
}
else {
set("#select2", value);
reset("#select2", "#select3");
}
});
$("#select2").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select2", "#select3");
}
else {
set("#select3", value);
}
});
function init() {
$("select").each(function() {
$(this).data('options', $(this).find('option').clone());
});
}
function reset(parent, child) {
var opts = $(parent).data("options").filter('[value=""]');
$(child).html(opts.clone());
}
function set(select, value) {
var options = $(select).data('options').filter(`[data-value='${value}'],[value=""]`);
$(select).html(options.clone()).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
I would like to change the options of a selection dynamically in HTML if a checkbox is checked/because of another selection.
These are my selections:
<!-- choosing -->
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<!-- if choose == o1 -->
<select name="subject1" id="subject1">
<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>
</select>
<!-- if choose == o2 -->
<select name="subject2" id="subject2">
<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>
</select>
I guess you would use JavaScript for this, but I'm really new to all of that, so, could you show me what kind of function could be used to solve this.
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject" id="subject"></select>
<script>
const option = document.getElementById("choose")
option.addEventListener("change", (evt) => {
let options1 = `<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>`
let options2 = `<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>`
if(option.value == "o1")
document.getElementById("subject").innerHTML = options1;
else if(option.value == "o2")
document.getElementById("subject").innerHTML = options2;
else
document.getElementById("subject").innerHTML = '';
})
</script>
Try this
<select name="choose" id="choose" onchange="custom_change()">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject2" id="subject"></select>
<script>
function custom_change()
{
var choose_value = document.getElementById("choose").value;
var option_1 = "<option value=''>-- choose --</option><option value='Religion'>Religion</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
var option_2 = "<option value=''>-- choose --</option><option value='Geschichte'>Geschichte</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
if(choose_value == "o1")
document.getElementById("subject").innerHTML = option_1;
else if(choose_value == "o2")
document.getElementById("subject").innerHTML = option_2;
else
document.getElementById("subject").innerHTML = '';
}
</script>
I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>
You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.
code with combobox generate function (working well)
<script>
$('#combos').on('change', '.combo', function() {
var selectedValue = $(this).val();
if (selectedValue !== '' && $(this).find('option').size() > 2) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[value="' + selectedValue + '"]').remove();
$('#combos').append(newComboBox);
}
});</script>
html and php (working well)
<form id="myForm">
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<?php
while($r = mysql_fetch_array($result))
{
echo "<option value=\"" .$r['id'] . "\">".$r['field'] ." ------</option>";
}
?>
</select>
</div>
<input type="button" id="button_submit" value="Show">
</form>
This code should select only the non-selected comboboxes. But is not working. I think is only working for the 1st non-selected value that function found.
Please see image
<script>
$('#button_submit').click(function()
{
var combo_box_values = $('#combo1 option:not(:selected)').map(function ()
{
return parseInt(this.value);
}).get();
});
</script>
Question: Is it possible? Where is my code missing?
Cheers
EDIT: source code
<h4>Data Options</h4></center>
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<option value="1">uptime ------</option>
<option value="2">score ------</option>
<option value="3">gender ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo2" class="combo parentCombo1" data-index="2">
<option></option>
<option value="1">uptime ------</option>
<option value="2">score ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo3" class="combo parentCombo1 parentCombo2" data-index="3">
<option></option>
<option value="1">uptime ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo4" class="combo parentCombo1 parentCombo2 parentCombo3" data-index="4">
<option></option>
<option value="1">uptime ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select></div>
I think the leading part of the selector feeding the .map() needs to be #combos and not #combo1 if you want to examine all the not selected options from all the <select> elements. For example,
var combo_box_values = $('#combos option:not(:selected)').map(function() {
return parseInt(this.value);
}).get();
Edit: Based on feedback in the comments and an updated question this might work for you, however I'm sure a nicer solution exists as this just feels clunky.
$('#button_submit').click(function() {
var combo_box_values = $('#combos .combo').filter(function() {
return this.selectedIndex === 0;
}).map(function () {
return $('option:not(:selected)', this).map(function() {
return parseInt(this.value);
}).get();
}).get();
console.log(combo_box_values);
return false;
});
I think the key part to understand is the .filter() which excludes the <select>s that the user has chosen an option for, leaving only those that have not been chosen. From there, it is a case of finding all the options that are not selected and extracting the value attribute.
If you want the selected options you could use $('option', this) instead of $('option:not(:selected)', this) in the code above.
In the demo this should show 2,3,4,5,6,7,8,9 if uptime is selected in the first <select> and 1,2,3,4,5,6,7 if surprised is chosen in the first and location in the second.
Hope this helps!
I have two <select> elements with different IDs.
When the user selects a value from the first select box, I want the second select box to only display connected values.
My code:
<select id="ExtraField_1" name="ExtraField_1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="17">test17</option>
<option value="18">test18</option>
<option value="19">test19</option>
<option value="20">test20</option>
</select>
So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.
How can I use JavaScript to resolve this problem?
If you can use jQuery then you can always just clear and append the options to the second select.
$('#ExtraField_1').change(function(){
$('#ExtraField_2').find('option').remove()
if($(this).val() == '1'){
$('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2'));
$('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3'));
$('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4'));
}
if($(this).val() == '2'){
$('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5'));
$('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6'));
$('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7'));
}
});
http://jsfiddle.net/8XVuv/2/
using only javascript is a bit more complicated but I would still take the same approach.
function createOption(otext,oValue){
var newOption = document.createElement('option');
newOption.text = otext;
newOption.value = oValue;
return newOption;
}
function clearSelect(theSelect){
for(var i = 0;i <= theSelect.options.length+1;i++)
{
theSelect.remove();
}
}
function onSelect(theSelect){
var nextSelect = document.getElementById('ExtraField_2');
clearSelect(nextSelect);
var selected = theSelect.options[theSelect.selectedIndex];
if(selected.value == 1){
nextSelect.add(createOption('test2','2'));
nextSelect.add(createOption('test3','3'));
nextSelect.add(createOption('test4','4'));
}
if(selected.value == 2){
nextSelect.add(createOption('test5','5'));
nextSelect.add(createOption('test6','6'));
nextSelect.add(createOption('test7','7'));
}
}
with html:
<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" >
<option value="0">Select a test..</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="0">Select from the left</option>
</select>
as you can see it still does what you expect but you are not hiding options.
http://jsfiddle.net/upKzW/13/
$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
http://jsfiddle.net/judearasu/rF8G6/