Question

MVC3甚至可以实现吗？

我想过滤两个具有相同选项的不同下拉菜单，其方式是，当选择第一个选项时，在第二个下拉列表中该值应该被隐藏。

 $('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        $(this).toggle($(this).val() !== selectedValue);
    });
});

http://jsfiddle.net/b4MjY/2/如果所有values都相同，这一切都很有效。 但我需要的是，当价值观不同时，它会做同样的事情。因此，它按Text或ID选项进行过滤，而不是value

我只是不确定是否有办法通过MVC分配任何内容，而无需更改或创建帮助程序。

修改

是否有可能从选项中获取innerHTML的值并按该值过滤？

更新感谢所有帮助过的人！

这最终是最简单的解决方案。 http://jsfiddle.net/b4MjY/23/

虽然列出的所有解决方案在不同场合都很好。

Answer 1

我想在某种程度上过滤两个具有相同选项的不同下拉列表当第一个选项被选中时，在第二个下拉列表中值应隐藏。

我在之前的stackoverflow问题中玩过这个，发现这个效果很好。请参阅下面的DEMO，它正是如此。它隐藏了在另一个中选择的下拉列表中的值。

DEMO - 隐藏在另一个下拉列表中选择的下拉列表中的值

这在MVC3中是可能的，您需要做的就是使用JavaScript复制完整列表并将其存储在数组中。

然后你可以使用类似于removeSelected的代码来获取指定列表的选定值，并将其从指定的目标列表中删除。

该方法将使用完整列表的本地副本，以便在删除项目之前“重新填充”列表，以确保再次添加任何未选择的项目。

无论您是否使用MVC3，使用JavaScript / jQuery删除项目的功能都不会改变。 MVC3只提供项目列表。

只需添加，您不需要每个项目的id值。如果它们都有独特的文字你就可以了。正如你在下面看到的那样，我只是通过值来匹配而忽略了id。

var $ddl1 = $("#ddl1");
var $ddl2 = $("#ddl2");

var employees = [
    { Id: 0, Name: "Michael Jordan"},
    { Id: 1, Name: "Magic Johnson"},
    { Id: 2, Name: "Larry Bird"},
    { Id: 3, Name: "Some Guy"},
    { Id: 4, Name: "Another Dude"}
];


function resetEmployee($selectElement) {
    $selectElement.empty();

    employees.forEach(function(employee) {
        $selectElement.append('<option value="' + employee.Id + '">' + employee.Name + '</option>');
    });
};

resetEmployee($ddl1);
resetEmployee($ddl2);

removeSelected($ddl1, $ddl2);
removeSelected($ddl2, $ddl1);

function removeSelected($sourceSelect, $fromSelect) {
    var fromSelectedValue = $fromSelect.val();
    resetEmployee($fromSelect);

    $fromSelect.find('option[value="' + $sourceSelect.val()  + '"]').remove();
    $fromSelect.val(fromSelectedValue);
};

$ddl1.on('change', function(){
    removeSelected($ddl1, $ddl2);
});

$ddl2.on('change', function(){
    removeSelected($ddl2, $ddl1);
});

Answer 2

好的我喜欢你的问题，因为我将来可能会实现类似的东西，这里是一个类似插件的脚本。 live example

您基本上只需要为希望值唯一的每个下拉列表添加一个类"mutual-exclusion"。这意味着该脚本适用于您抛出的任意数量的下拉菜单，而实际示例有3个。当然，只有2个可以，因为它是最简单的情况

另外，如果您想要隐藏而不是禁用（我更喜欢），您可以看到in this example

基本上我只更改了if ($curSelected.filter('option[value="' ...

上的2个案例

var $mutualExcludedDropdowns = $('.mutual-exclusion');
$mutualExcludedDropdowns.change(function() {
    var selectedValue = $(this).val();
    var curItem = $(this)
    var $curSelected = $('option:selected' , $mutualExcludedDropdowns);

    $mutualExcludedDropdowns.each(function(index, dropdownList) {
        if ($(curItem)[0]  !== $(dropdownList)[0])
        {
            $('option', $(dropdownList)).each(function(index, optionItem) {
                if ($curSelected.filter('option[value="' + $(optionItem).val() + '"]').length > 0)
                    {
                        $(optionItem).attr('disabled', 'disabled');
                    }
                    else
                    {
                        $(optionItem).removeAttr('disabled');
                    }
            });
        }
    });
});

Answer 3

您可以禁用在第二个下拉列表中使用已禁用属性

选择的选项

$('#ddl1').change(function() {
var selectedValue = $(this).val();
$('#ddl2 option').each(function() {
    if($(this).val() == selectedValue) $(this).attr('disabled',true);
    else $(this).attr('disabled',false);
});
});

你不能.toggle（）或hide（）选项，因为IE不允许将显示设置为none，替代方法是.remove（）选项并在下次更改时将它们添加回来。

Answer 4

懒惰编码：

$('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});
$('#ddl2').change(function() {
    var selectedValue = $(this).val();
    $('#ddl1 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});

DropDownListFor，设置<option> </option>的ID

4 个答案:

DEMO - 隐藏在另一个下拉列表中选择的下拉列表中的值