![](/img/trans.png)
[英]How to remove an item in DropDownList in ASP MVC using JavaScript
[英]How to remove an item from a DropDownList basing on the item selected in another DropDownList in ASP MVC and using Javascript
我正在使用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" })%>
因此,根据上面的代码,在“邮寄”中选择了该项目后,应从“邮寄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()'。
您可以像在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对这个问题的回答如何在HTML中的select(Multiple)指定索引处插入选项? 和他的insertOptionToSelect
函数。
要按值或文本进行比较,只需使用适当的if
语句,然后随意删除其他变量即可。 我是MVC的新手,所以我给了您两个选择,我不确定100%是否呈现HTML =]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.