選擇第一個下拉菜單會從下一個下拉菜單中刪除所選項目

Question

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

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示例怎么樣？ 每個下拉列表的選定選項在其他每個列表中均被禁用​​。 這使您可以更改選項而不刪除它。

$('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>