0

HTMLに7つのドロップダウンボックスがあります。それらはすべて同じデータが取り込まれます。私がやろうとしているのは、最初のドロップダウンが選択されたときに、選択したアイテムを次のドロップダウンから削除することです。したがって、データがある場合: A、B、C、D、E、F、G、H、I 1 つのドロップダウンで、最初のドロップダウンで 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 に答える