使用jQuery从一组选择菜单中删除和添加选项

Question

这比标题要复杂得多,但这里有基本的业务规则:

1. 页面上有三个选择菜单,每个菜单都填充相同的选项和值.
2. 总会有三个选择菜单.
3. 每个选择菜单中始终有相同数量的选项/值.
4. 在任何菜单中选择问题将从其他两个菜单中删除该问题作为选项.
5. 从任何菜单中重新选择一个不同的问题将带回之前从其他两个菜单中删除的问题.

我尝试了几种不同的方法,而杀死我的东西是5号.我知道它不会被插入精确的索引,因为有些问题可能已被删除,这会重新排序索引.它基本上需要一个insertBefore或insertAfter,它将它放在同一个"槽"中.

即使你没有发布任何代码,关于你如何处理这个问题的一些想法将是非常有帮助的.选择菜单和jQuery看起来像这样,但我在不同的变化中尝试了很多:

jQuery的:

$(function() {
    $(".questions").change(function() {
        var t = this;
        var s = $(t).find(":selected");

        // Remove, but no "insert previously selected" yet...

        $(".questions").each(function(i) {
            if (t != this) {
                $(this).find("option[value=" + s.val() + "]").remove();
            }
        });
    });
});

HTML:

<select name="select1" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select2" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select3" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>

Answer 1

不要删除元素,隐藏它们.删除后,你会遇到很多不必要的问题.这对我有用:

$(function() {
    $('select.questions').change(function() {            
        var hidden = [];
        // Get the values that should be hidden
        $('select.questions').each(function() {
            var val = $(this).find('option:selected').val();
            if(val > 0) {
                hidden.push($(this).find('option:selected').val());
            }
        });
        // Show all options...          
        $('select.questions option').show().removeAttr('disabled');            
        // ...and hide those that should be invisible
        for(var i in hidden) {
            // Note the not(':selected'); we don't want to hide the option from where
            // it's active. The hidden option should also be disabled to prevent it
            // from submitting accidentally (just in case).
            $('select.questions option[value='+hidden[i]+']')
                .not(':selected')
                .hide()
                .attr('disabled', 'disabled');
        }
    });
});

我也对你的HTML进行了一些小改动,我表示一个应该总是可见的选项,值为0.所以有效选项从1到3.

这是一个有效的例子,告诉我,如果我误解了你:

http://www.ulmanen.fi/stuff/selecthide.php