在 mvc 下拉列表中排除 jquery 函数的第一个值答案

【问题标题】：Exclude first value on jquery function on mvc dropdown list在 mvc 下拉列表中排除 jquery 函数的第一个值
【发布时间】：2013-07-25 03:39:35
【问题描述】：

我有这个带有下拉菜单的 MVC Web 应用程序：

@Html.DropDownListFor(model => model.Questions1, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions1", Name = "Questions1"})

@Html.DropDownListFor(model => model.Questions2, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions2", Name = "Questions2"})

还有这个 jquery：

// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option').each(function() {
    $this = $(this);
    options.push({ Name: $this.text(), Value: $this.val() });
});

// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
    $previouslySelected = $select.find(':selected');
    $select.empty();
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.Value != $selOption.val()) {
            if ($previouslySelected.val() == opt.Value) {
                $select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
            }
            else {
                $select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
            }
        }
    }
}

// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');

$Questions1.change(function() {
    rebuildSelect($(this), $Questions2);
});

$Questions2.change(function() {
    rebuildSelect($(this), $Questions1);
});

// Go ahead and run the function on each box to remove the default entries from the other box
rebuildSelect($Questions1.find(':selected'), $Questions2);
rebuildSelect($Questions2.find(':selected'), $Questions1);

jquery 代码的作用是在第二个下拉列表中删除第一个下拉列表中的选定值，这样用户将无法选择两个相同的问题。

我的问题是下拉菜单的默认值“选择>>”正在从第二个下拉菜单中删除。

知道如何排除“选择>>”吗？提前致谢！

Fiddle

【问题讨论】：

标签： c# jquery asp.net-mvc razor

【解决方案1】：

您是否有理由不能在不重建控件的情况下仅删除要删除的项目？

以下两种方法：一种将删除选定的项目。另一个将根据其价值删除一个项目。假设您的选项值是唯一的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <select id="example">
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select></div>
    <div>
        <a href="javascript:;" id="remove">Remove Selected</a></div>
    <div>
        <a href="javascript:;" id="removeSecond">Remove Second</a></div>
    <script type="text/javascript">
        $(function () {
            $("#remove").click(function () {
                var select = $("#example");
                var selected = select.find(":selected");
                selected.remove();
            });

            $("#removeSecond").click(function () {
                var select = $("#example");
                var second = select.find("[value=2]");
                second.remove();
            });
        });
    </script>
</body>
</html>

编辑：

这是你想要的吗？我调用 $select.find("[value!=0]").remove(); 而不是空的，而不是空的这似乎与您描述的行为相符。

// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option:not(:first)').each(function() {
    $this = $(this);
    options.push({ Name: $this.text(), Value: $this.val() });
});

// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
    $previouslySelected = $select.find(':selected');
    $select.find("[value!=0]").remove();
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.Value != $selOption.val()) {
            if ($previouslySelected.val() == opt.Value) {
                $select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
            }
            else {
                $select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
            }
        }
    }
}

// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');

$Questions1.change(function() {
    rebuildSelect($(this), $Questions2);
});

$Questions2.change(function() {
    rebuildSelect($(this), $Questions1);
});

// Go ahead and run the function once to remove the default entry from the second box
rebuildSelect($Questions1.find(':selected'), $Questions2);

【讨论】：

第二个符合我需要做的。谢谢！
不用担心。对于 jQuery 选择器的未来参考，试试这个站点：api.jquery.com/?s=select+attribute - 我必须亲自去那里仔细检查“属性非值”选择器的语法。该站点应该是您解决 jQuery 相关问题的首选站点。
有些奇怪。它适用于提琴手，但不适用于我在 Visual Studio 上的代码。
它正在工作。我将 ("[value!=0]") 更改为 ("[index!=0]")。再次感谢！
奇特的。可能是 jQuery 版本或浏览器处理 jQuery 的方式不同。不管怎样，很高兴你现在被分类了。

【解决方案2】：

我遇到了类似的问题，所以我所做的就是在“Select>>”字符串前面插入一个 Alt+255 字符。你看不到这个 Alt+255 字符。它是不可见的。然后在我的代码中，我只是检查了第一个字符以排除它。

【讨论】：

请您为您的概念发布一些示例代码吗？它对许多人都有用。