0

我在 html 中有 7 个下拉框。它们都将填充相同的数据。我想要做的是，当第一个下拉列表被选中时，它会从下一个下拉列表中删除选定的项目。因此，如果您有数据：A、B、C、D、E、F、G、H、I 在一个下拉列表中，如果我在第一个下拉列表中选择 B，那么在下一个下拉列表中它应该只显示 A、C、D ,E,F,G,H,I 等最多 7 个下拉菜单。我不知道在 JavaScript 中解决这个问题的最佳方法是什么。提前感谢您的帮助示例代码：

   <select>
   <option value="1">1</option>
   <option value="2">2</option>
    <option value="3">3</option>
     </select>

     <select>
     <option value="1">1</option>
     <option value="2">2</option>
      <option value="3">3</option>
      </select>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
     </select>

     <select>
      <option value="1">1</option>
       <option value="2">2</option>
      <option value="3">3</option>
    </select>
4

3 回答 3

2

您可以使用属性定位。我会假设 jQuery，因为为什么不呢。

$("select").change(function() {
   $(this)
       .next("select")
       .find("option").removeAttr("disabled")
       .end()
       .find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
})​

同样，这只是一种方法，因此如果您发布代码，我们可以做出更好的猜测。

更新 了这里的 JSFiddle：http: //jsfiddle.net/FaVdu/1/

于 2012-05-09T19:40:50.973 回答
1

像这样的 jsFiddle 示例怎么样？每个下拉菜单的选定选项在其他每个下拉菜单中都被禁用。这允许您更改选项而不删除它。

$('select').change(function() {
    var ary = new Array();
    $('select option:selected').each(function() {
        if ($(this).val().length > 0) {
            ary.push($(this).val());
        }
    });
    $('select option').each(function() {
        if ($.inArray($(this).val(), ary) > -1) {
            $(this).attr('disabled', 'disabled');
        } else {
            $(this).removeAttr('disabled');
        }
    });
});​
于 2012-05-09T19:49:18.163 回答
0

您好，以上问题的解决方案检查一下

 <script type="text/javascript">
        function cleanOptions(selectedOption) {
            var val = selectedOption.options[selectedOption.selectedIndex].value;
            if(val!="select"){
            //Clear all items
            $("#drop2 > option").remove();

            //Add all options from dropdown 1
            $("#" + selectedOption.id + "> option").each(function () {
                var opt = document.createElement("option");
                opt.text = this.text;
                opt.value = this.value;
                document.getElementById("drop2").options.add(opt);
            });

            //Remove selected
            $("#drop2 option[value='" + val + "']").remove();
        }
        }
    </script>

<select id="drop1"  onchange="cleanOptions(this)">
  <option value="select" selected>---select---</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" >Audi</option>
</select>

<select id="drop2">
  <option value="select" selected>---select---</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" >Audi</option>
</select>
于 2014-05-21T08:15:46.350 回答