更改 select 的值

Question

大家好，我有 2 个下拉列表，当我单击下拉列表 1 的任何选项时，我需要更改下拉列表 2 的选项，例如：

下拉菜单 1 下拉菜单 2
- 选项 1
- 选项 2
- 选项 3

如果我在下拉列表 1 ("Option 1") 中 select 自动下拉列表 2 将更新一些值，如果我在下拉列表 2 (select ("Option 2" ) 下拉列表 2 将更新一些值，其他选项也会更新！！！

如何使用 Javascript 或 Jquery 来做到这一点？

Answer 1

假设您的下拉列表中的 ID 为 1 和 2，您可以在 javascript 代码中执行类似的操作：

(function(){
  $(function () {
    $("#one").change(function(){
      //if you want to load them from somewhere
      //$("#two").load({url});

      //if you want to manually load them
      $("#two option").remove();
      if($(this).val() == 1)
        $("#two").append("<option value='11'>eleven</option>");
      else if($(this).val() == 2)
        $("#two").append("<option value='22'>twenty-two</option>");
    });
  })
} ());

当第一个下拉列表更改时，第二个下拉列表中的值也会更改。如果您想从服务器加载新选项，请将注释 jQuery 'load' 函数与您的 URL 一起使用。如果你知道你想要的项目，你可以像上面的代码一样手动添加它们。

示例：http://plnkr.co/edit/yE0m4ZwwE1P6LT0VGuYE?p=info

Answer 2

您可以在更改事件上使用简单的 javascript 下拉菜单。您还可以通过调用 javascript 函数并通过第一个下拉列表的 ID 取出值来取出 第一个下拉菜单文本和值。。并且可以分配给新的下拉列表。请参考附件中的示例代码

<html>
<head>
<script>
function doChange() 
{
    var dropDown1 = document.getElementById("mydropdown");
    var dropDown2 = document.getElementById("mydropdown2");


    var op = new Option();
    op.value = dropDown1.options[dropDown1.selectedIndex].value;
    op.text = dropDown1.options[dropDown1.selectedIndex].text ;
    document.getElementById("mydropdown2").options.length = 0;  
    dropDown2.options.add(op);

}
</script>
</head>
<body>
<form>
<select name="mydropdown" id="mydropdown" onchange="doChange()">
<option value="dummy1">display1</option>
<option value="dummy2">display2</option>
<option value="dummy3">display3</option>
</select>
<br/>

<select name="mydropdown2" id="mydropdown2">
</select>
</form>
</body>

更改 select 的值

Change the values of select

html

javascript

jquery

drop-down-menu