如何改变动态组合框的行为

时间:2013-03-25 14:30:49

标签: jquery html combobox

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>

Working Fiddle

正如您在小提琴中看到的那样,如果您选择选项2,则下一个组合框选项将是:选项1和选项3.

我想要的是:

如果我选择选项2,则下一个组合框选项应为:选项3(仅限)。

这意味着根据选择的选项,下一个组合框(动态组合框)不应包含低于其自身的选项。

如何做到?

1 个答案:

答案 0 :(得分:1)

见:

 newComboBox.find('option').each(function(){
     if(this.value < selectedValue) $(this).remove();
 });

Sample