Question

我在html中有7个下拉框。他们都会填充相同的数据。我想要做的是当第一个下拉列表被选中时，它将从下一个下拉列表中删除所选项目。所以，如果你有数据：A，B，C，D，E，F，G，H，我在一个下拉列表中，如果我在第一个下拉列表中选择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>

Answer 1

您可以使用属性定位。我会假设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/

Answer 2

jsFiddle example 这样的内容怎么样？每个下拉列表的选定选项在每隔一个下拉列表中禁用。这允许您在不删除选项的情况下更改选项。

$('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');
        }
    });
});

Answer 3

您好，上面的问题解决方案检查

 <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>

选择第一个下拉列表，它将从下一个下拉列表中删除所选项目

3 个答案: