更改选择的值答案

【问题标题】：Change the values of select更改选择的值
【发布时间】：2015-03-24 18:13:16
【问题描述】：

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

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

如果我在下拉列表 1（“选项 1”）中选择自动下拉列表 2 将更新一些值，如果我在下拉列表 2 中选择（“选项 2”）下拉列表 2 将更新一些值并且相同其他选项！！！

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

【问题讨论】：

为下拉菜单 1 绑定更改事件，并在该事件中更新下拉菜单 2 的值。这就是方法。现在分享您的代码，以便我们为您提供帮助:)
是的，这正是我所需要的！谢谢你，我的朋友！祝福你...这里有同样问题的人的链接！ javascript.about.com/library/bldydrop1.htm

标签： javascript jquery html drop-down-menu

【解决方案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>");
    });
  })
} ());

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

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

【讨论】：

嘿伙计们，我做了这个：plnkr.co/edit/StxDCVTFsjLieObJhQlE?p=preview 并且它有效！但我想添加超过 1 个选项
然后重复 3 条 javascript 行 [从 var option = document.createElement("option") 开始] 为您需要添加的许多选项。

【解决方案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>

【讨论】：