値を持つ2つのドロップダウンリストがあります。最初に値を選択すると、同じ選択値の要素を2番目の要素に戻したいと考えています。第2のリストは、第1のリストの選択に依存する。どうすればこのことができますか?ネストされたドロップダウンリスト:依存する値
<div class="form-group">
<label for="first">First list</label>
<select id="first" class="form-control" role="listbox" onchange="filterList();">
<option value="Select level 1" selected="selected">Select...</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="second">Second list</label>
<select id="second" class="form-control" role="listbox">
<option value="Select level 2" data-group="Select" selected="selected">Select...</option>
<option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option>
<option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option>
<option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option>
<option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option>
</select>
</div>
jQueryのスクリプト
function filterList(){
var first = $("#first").find('option:selected').text(); // stores first list selected elements
$("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select>
var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out
toMove.appendTo("#option-container"); // moves elements in #option-container
$("#second").removeAttr("disabled"); // enables select
};
まず、2番目の選択でこの目的に 'value'を使用しないでください。それ以外の場合、2番目のドロップダウンでどのオプションが選択されたのかを判断することはできません。 – kalsowerus
あなたがあなたの '
最初のリスト 'values'を2番目のリスト' data-group'にリンクするには? – GeoGyro