Javascript 隐藏/显示辅助选择上的选定选项
我有两个ID不同的元素 当用户从第一个选择框中选择值时,我希望第二个选择框仅显示连接的值 我的代码:Javascript 隐藏/显示辅助选择上的选定选项,javascript,select,Javascript,Select,我有两个ID不同的元素 当用户从第一个选择框中选择值时,我希望第二个选择框仅显示连接的值 我的代码: <select id="ExtraField_1" name="ExtraField_1"> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option>
<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>
因此,当用户从第一个选择框M中选择test1时,在第二个选择框中只会看到test2、test3和test4;第一个框中的test2将在第二个框中显示test6、test7和test8
如何使用JavaScript来解决这个问题?如果可以使用jQuery,那么您总是可以清除并将选项附加到第二个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'));
}
});
仅使用javascript有点复杂,但我仍然会采用相同的方法
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'));
}
}
使用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>
正如您所看到的,它仍能满足您的期望,但您并没有隐藏选项
})
如果你要使用jQuery,你需要添加一个脚本标记来引用jQuery,如果你想使用我刚刚发布的纯javascript答案,那么你只需要一个浏览器,你需要将代码放在脚本标记的某个地方。谢谢,我已经更改了我想要的第一个代码,但是我不能使用它,为什么你不能使用它?它似乎按照你描述的方式工作。您没有在正在开发的页面上添加对jQuery的引用吗?谢谢,我已经使用了jQuery代码。现在我有了我想要的形式;你能帮我把发送的数据插入数据库吗?这是一个很好的表单,将其放入数据库将是一个复杂的过程。我看到了你的另一个问题,但我对php的了解还不够,目前还不能提供帮助。不过我会调查一下,也许我能想出一些办法来帮你。很高兴我能帮上第一部分,祝你好运。
$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);