1

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/

尽管列出的所有解决方案都适用于不同的场合。

4

4 回答 4

1

我想用相同的选项过滤两个不同的下拉菜单，这样当第一个选项被选中时，在第二个下拉菜单中该值应该被隐藏。

我在之前的 stackoverflow 问题中玩过这个，发现它运行良好。请参阅下面的演示，它正是这样做的。它在另一个下拉列表中隐藏了一个值。

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

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

Youn 然后可以使用类似于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);
});
于 2012-10-19T12:41:09.247 回答
1

好的，我喜欢你的问题，因为我将来可能会实现类似的东西，这里有一个类似插件的脚本。活生生的例子

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

此外，如果你想隐藏而不是禁用（我更喜欢），你可以在这个例子中看到

基本上我只改变了2个案例if ($curSelected.filter('option[value="'......

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');
                    }
            });
        }
    });
});
于 2012-10-19T13:29:36.260 回答
0

您可以使用 disabled 属性在第二个下拉列表中禁用该选项

$('#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 不允许将显示设置为无，替代方法是 .remove() 选项并在下一次更改时将它们添加回来。

于 2012-10-19T12:40:43.767 回答
0

懒惰编码：

$('#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);
        };
    });
});
于 2012-10-19T12:49:55.353 回答