0

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

In a view, I have two dropdownlist which loads same values from a table in the base.

I want create an event that delete the item selected in the DropDwonList 1 from the DropDownList 2.

This is the code :

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

So basing on the code above, when the item is selected in 'Poste',,,its similair should be deleted from 'Poste Suivant'.

This is what I try but it's not worked :

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]);

}

I think the problem is : because I didn't define 'test3()' in the dropdownlist.

4

1 回答 1

1

您可以像在 HTML 帮助器中添加onchange属性一样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" })%>

向 body 标记添加一个onload属性，以便函数运行以删除默认选定项：

<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 =]

于 2013-05-28T15:38:35.973 回答