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

这比标题所描述的要复杂一些，但以下是基本的业务规则：

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>

不要删除元素，而是隐藏它们。删除后，您会给自己带来更多不必要的问题。这对我有用：

$(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 http://www.ulmanen.fi/stuff/selecthide.php