Question

这比标题更加复杂，但这是必要的商业规则：

有三个选择菜单页面，每个都填充相同选项和价值观。
总会有三个选择菜单。
总会有相同的号码每个选择中的选项/值菜单。
选择任何一个问题菜单将删除该问题作为选项另外两个菜单。
重新选择其他问题从任何菜单将带来回答那个问题以前从另一个中删除它以前的索引有两个菜单。

我尝试了几种不同的方式，杀死我的是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

Answer 2

我最近正在研究这个解决方案并修改此代码以删除而不是禁用/隐藏。对于我的解决方案，它是必需的（我也使用UI来设置选择元素的样式）。我是这样做的：

// Copy an existing select element
var cloned = $('select[name="select1"]').clone();

// Each time someone changes a select
$('select.questions').live('change',function() {
    // Get the current values, then reset the selects to their original state
    var hidden[];
    $('select.questions').each(function() {
        hidden.push($(this).val());
        $(this).html(cloned.html());
    });
    // Look through the selects
    for (var i in hidden) {
        $('select.questions').each(function() {
            // If this is not the current select
            if ((parseInt(i)) != $(this).parent().index()) {
                // Remove the ones that were selected elsewhere
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').remove();
            } else {
                // Otherwise, just select the right one
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').attr('selected','selected');
            }
        });
    }
});

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

2 个答案: