Jquery:
$('body').on('change', '.combo', function() {
var selectedValue = $(this).val();
if ($(this).find('option').size() > 2) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = $(this).attr('id').replace("combo", "");
var newComboBoxIndex = thisComboBoxIndex + 10;
$('.parentCombo' + thisComboBoxIndex).remove();
if (selectedValue != '') {
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + thisComboBoxIndex);
newComboBox.find('option[val="' + selectedValue + '"]').remove();
$('div.'+thisComboBoxIndex).append(newComboBox);
}
}
});
HTML:
<div class="1">
<select id="combo1" class="combo" data-index="1">
<option></option>
<option val="1">Opt1</option>
<option val="2">Opt2</option>
<option val="3">Opt3</option>
</select>
</div>
<br>
<div class="2">
<select id="combo2" class="combo" data-index="2">
<option></option>
<option val="1">Opt1</option>
<option val="2">Opt2</option>
<option val="3">Opt3</option>
</select>
</div>
ワーキング フィドル
フィドルでわかるように、オプション2を選択すると、次のコンボボックスオプションはオプション1とオプション3になります。
私が欲しいのは:
オプション2を選択した場合、次のコンボボックスオプションは次のようになります:オプション3(のみ)。
これは、選択したオプションに基づいて、次のコンボ(動的なコンボ)にそれ自体よりも低いオプションが含まれていてはならないことを意味します。
どうすればそれを作ることができますか?