C# 如何基于ASP MVC中另一个DropDownList中选择的项目并使用Javascript从DropDownList中删除项目

我正在使用C#和SQLServer2005开发一个ASP.NETMVC3应用程序

在一个视图中，我有两个dropdownlist，它从基表中加载相同的值

我想创建一个事件，从DropDownList 2中删除DropdOnlist 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" })%>

---

我认为问题在于：因为我没有在dropdownlist中定义“test3（）”。

您只需添加

onchange

属性，就像您在HTML助手中使用

id

属性一样：

<%: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" })%>

然后，如果我们修改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++];
    }
}

var removedOption=null；
var removedOptionIndex=-1；
函数test3（）{
var dd=document.getElementById（'dd'）；
var posteElement=document.getElementById（'poste'）；
var currentValue=posteElement.options[posteElement.selectedIndex].value；//这将是所选选项“2”的值，在本例中为：2
var currentText=posteElement.options[posteElement.selectedIndex].text；//这将是所选选项的文本，在本例中为“Two”：Two
//将先前删除的选项添加回列表的先前位置
如果（removedOption！=null）{
var newOpt=document.createElement（“选项”）；
newOpt.value=removedOption.value；
newOpt.innerHTML=removedOption.text；
如果（removedOptionIndex<0）removedOptionIndex=0；
如果（removedOptionIndex>dd.options.length）removedOptionIndex=dd.options.length；
InsertOptionSelect（dd、removedOptionIndex、newOpt）；
removedOption=null；
}
for（var i=0；i

感谢pizzamonster对这个问题的回答和他的

insertoptionSelect

功能

---

要通过值或文本进行比较，只需使用适当的

if

语句，并随意删除其他变量以保持整洁。我给了你这两个选项，因为我自己是MVC新手，对呈现的HTML=]我不是100%确定。

我已经编辑了我的答案，试试看。尽管有一件事非常突出，那就是如果用户选择了

poste

中的每一项，那么

dd

中就没有选项了。也许这应该只运行一次？或者，当所选项目在

poste

中更改时，您可能需要在中添加其他内容以重新添加缺少的字段？再次感谢您的工作，很抱歉，我尝试了您的代码，但没有得到任何结果：(（该项目仍然存在！关于您的备注，是的，它应该只删除一次，，，这意味着当我在poste中选择P1时，，，它应该从dd中临时删除，，，然后我在poste中选择P2，，，dd必须包含P1，但不包含P2，，，我希望您理解我：）我等待您的评论，Thx:）浏览器控制台中是否有错误？你能调试并逐步检查代码，看看哪里出了问题吗？不，没有错误。我无法在视图中放置断点：（（好的，我的代码中有语法错误，我已更新了答案以反映。此代码成功地从

select

元素中删除了该项。

<body onload="test3()">

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++];
    }
}