0

我有这个带有下拉菜单的 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 代码所做的是删除第二个下拉列表中第一个下拉列表中的选定值，这样用户将无法选择两个相同的问题。

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

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

小提琴

4

2 回答 2

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);
于 2013-07-25T04:09:01.147 回答
0

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

于 2013-07-25T04:17:56.547 回答