Question

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

下拉菜单1下拉菜单2
- 备选方案1 - 备选方案2 - 备选方案3

如果我在下拉列表1中选择（＆＃34;选项1和＃34;），则自动下拉列表2将更新一些值，如果我在下拉列表2中选择（＆＃34;选项2＆＃34;）下拉列表2将更新一些值，其他选项也相同!!!

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

Answer 1

假设您的下拉菜单中有一个和两个，您可以在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＆＃39; load＆＃39;功能与您的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>

更改选择的值

2 个答案: