Hide/show The Selected Option On A Secondary Select
I have two
Solution 1:
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'));
}
});
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:
<selectid="ExtraField_1"name="ExtraField_1"onchange="javascript: onSelect(this);" ><optionvalue="0">Select a test..</option><optionvalue="1">test1</option><optionvalue="2">test2</option><optionvalue="3">test3</option><optionvalue="4">test4</option><optionvalue="5">test5</option><optionvalue="6">test6</option><optionvalue="7">test7</option><optionvalue="8">test8</option><optionvalue="9">test9</option><optionvalue="10">test10</option><optionvalue="11">test11</option><optionvalue="12">test12</option></select><selectid="ExtraField_2"name="ExtraField_2"><optionvalue="0">Select from the left</option></select>
as you can see it still does what you expect but you are not hiding options.
Solution 2:
$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
Post a Comment for "Hide/show The Selected Option On A Secondary Select"