15

フォームに 2 つの異なる SELECT OPTION があります。

1 つ目はソース、2 つ目はステータスです。ソース ドロップダウンで選択したオプションに応じて、ステータス ドロップダウン リストに異なるオプションを表示したいと考えています。

ソース：

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

状態：

<select id="status" name="status">

</select>

オプション: - ソースが MANUAL の場合、ステータスは OPEN または DELIVERED です - ソースが ONLINE の場合、ステータスは OPEN または DELIVERED または SHIPPED です

私の非動作の試み:

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>
4

8 に答える 8

2

このjsfiddleには、私が工夫した解決策があります。アイデアは、html にセレクター ペアを用意し、(プレーンな) javascript を使用して、最初に選択されたオプションに基づいて依存セレクターのオプションをフィルター処理することです。例えば：

<select id="continents">
 <option value = 0>All</option>   
 <option value = 1>Asia</option>
 <option value = 2>Europe</option>
 <option value = 3>Africa</option>
</select> 
<select id="selectcountries"></select>

用途 (jsFiddle 内)

 MAIN.createRelatedSelector
     ( document.querySelector('#continents')           // from select element
      ,document.querySelector('#selectcountries')      // to select element
      ,{                                               // values object 
        Asia: ['China','Japan','North Korea',
               'South Korea','India','Malaysia',
               'Uzbekistan'],
        Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
        Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
      }
      ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;}   // sort method
 );

[編集2021 ]または次のようなデータ属性を使用します。

document.addEventListener("change", checkSelect);

function checkSelect(evt) {
  const origin = evt.target;

  if (origin.dataset.dependentSelector) {
    const selectedOptFrom = origin.querySelector("option:checked")
      .dataset.dependentOpt || "n/a";
    const addRemove = optData => (optData || "") === selectedOptFrom 
      ? "add" : "remove";
    document.querySelectorAll(`${origin.dataset.dependentSelector} option`)
      .forEach( opt => 
        opt.classList[addRemove(opt.dataset.fromDependent)]("display") );
  }
}
[data-from-dependent] {
  display: none;
}

[data-from-dependent].display {
  display: initial;
}
<select id="source" name="source" data-dependent-selector="#status">
  <option>MANUAL</option>
  <option data-dependent-opt="ONLINE">ONLINE</option>
  <option data-dependent-opt="UNKNOWN">UNKNOWN</option>
</select>

<select id="status" name="status">
  <option>OPEN</option>
  <option>DELIVERED</option>
  <option data-from-dependent="ONLINE">SHIPPED</option>
  <option data-from-dependent="UNKNOWN">SHOULD SELECT</option>
  <option data-from-dependent="UNKNOWN">MAYBE IN TRANSIT</option>
</select>

于 2013-11-01T15:05:30.157 に答える