如何根据在 ASP MVC 中的另一个 DropDownList 中选择的项目并使用 Javascript 从下拉列表中删除一个项目答案

【问题标题】：How to remove an item from a DropDownList basing on the item selected in another DropDownList in ASP MVC and using Javascript如何根据在 ASP MVC 中的另一个 DropDownList 中选择的项目并使用 Javascript 从下拉列表中删除一个项目
【发布时间】：2013-05-28 15:16:41
【问题描述】：

我正在使用 C# 和 SQL Server 2005 开发一个 ASP .Net MVC 3 应用程序。

在一个视图中，我有两个下拉列表，它们从基础表中加载相同的值。

我想创建一个事件，从 DropDownList 2 中删除在 DropDwonList 1 中选择的项目。

这是代码：

<%:Html.Label("Poste :")%><%: Html.DropDownListFor(model => model.SelectedPoste, Model.PostesItems, new { @id = "poste" })%>

<%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.NextPS, new { @id = "dd" })%>

所以根据上面的代码，当在'Poste'中选择该项目时，它的相似之处应该从'Poste Suivant'中删除。

这是我尝试的，但没有成功：

function test3() {
    var dd = document.getElementById('dd');
    var posteElement = document.getElementById('poste');
    var currentIndexP = posteElement.selectedIndex;
    var currentIndexD = dd.selectedIndex;
    if (currentIndexP == currentIndexD) dd.removeChild(dd[currentIndex]);

}

我认为问题在于：因为我没有在下拉列表中定义“test3()”。

【问题讨论】：

标签： c# javascript visual-studio-2010 asp.net-mvc-3

【解决方案1】：

您可以像在 HTML 帮助程序中添加 id 属性一样添加 onchange 属性：

<%:Html.Label("Poste :")%><%: Html.DropDownListFor(model => model.SelectedPoste, Model.PostesItems, new { @id = "poste", onchange = "test3()" })%>

<%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.NextPS, new { @id = "dd" })%>

将onload 属性添加到body 标签，以便函数运行以移除默认选中项：

<body onload="test3()">

然后，如果我们修改 javascript，使其根据值而不是索引从第二个列表中删除项目，并添加一些代码来存储丢失的选项以重新添加，那么一切都应该正常工作：

var removedOption = null;
var removedOptionIndex = -1;

function test3() {
    var dd = document.getElementById('dd');
    var posteElement = document.getElementById('poste');
    var currentValue = posteElement.options[posteElement.selectedIndex].value; // this will be the value of the selected option, '2' in this case: <option value="2">Two</option>
    var currentText = posteElement.options[posteElement.selectedIndex].text; // this will be the text of the selected option, 'Two' in this case: <option value="2">Two</option>

    // add the previously removed option back into the list in its previous position
    if (removedOption != null) {
        var newOpt = document.createElement("option");
        newOpt.value = removedOption.value;
        newOpt.innerHTML = removedOption.text;
        if (removedOptionIndex < 0) removedOptionIndex = 0;
        if (removedOptionIndex > dd.options.length) removedOptionIndex = dd.options.length;
        insertOptionToSelect(dd, removedOptionIndex, newOpt);
        removedOption = null;
    }

    for (var i = 0; i < dd.options.length; i++) // loop through all of dd's options
    {
        if (dd.options[i].value == currentValue) // use this if you want to compare by value
        {
            removedOption = dd.options[i];
            removedOptionIndex = i;
            dd.removeChild(dd.options[i]);
            break;
        }
        if (dd.options[i].text == currentText) // use this if you want to compare by text
        {
            removedOption = dd.options[i];
            removedOptionIndex = i;
            dd.removeChild(dd.options[i]);
            break;
        }
    }
}

function insertOptionToSelect(select, idx, option) {
    var saved = [];
    var i;
    for (i = 0; i < select.options.length; i++) {
        saved.push(select.options[i]);
    }
    select.options.length = 0;
    for (i = 0; i < idx; i++) {
        select.options[select.options.length] = saved[i];
    }
    select.options[select.options.length] = option;
    while (i < saved.length) {
        select.options[select.options.length] = saved[i++];
    }
}

感谢 Pizzamonster 对这个问题的回答 How to insert option at specified index of select(Multiple) in html? 和他的 insertOptionToSelect 函数。

要按值或文本进行比较，只需使用适当的if 语句并随意删除其他变量以保持整洁。我给了你这两个选项，因为我自己是 MVC 的新手，我不能 100% 确定渲染的 HTML =]

【讨论】：

我已经编辑了我的答案，试试吧。尽管有一件很突出的事情是，如果您的用户选择了poste 中的每个项目，那么dd 中将没有任何选项。也许这应该只运行一次？或者您可能需要在poste 中更改所选项目时添加其他内容以重新添加缺少的字段？
再次感谢您的工作，很抱歉迟到了，我尝试了您的代码，但没有得到任何结果:((该项目仍然存在！关于您的评论，是的，应该删除一次只是,,,这意味着当我选择P1例如在poste中时,,,它应该从dd中临时删除,,,然后我在poste中选择P2,,,dd必须包含P1而不是P2,,,我希望你了解我 :) 我等你的评论，谢谢 :))
浏览器控制台有错误吗？你能调试和单步调试代码，看看哪里出错了吗？
不，，，没有错误。而且我不能在视图中放置断点:(((
好的，我的代码中有语法错误，我已经更新了答案以反映。此代码成功地从 select 元素中删除了该项目。