如何使用JavaScript在ASP MVC中删除DropDownList中的项目

Question

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

在视图中，我有一个DropDownList，一个按钮。

如何为每次单击按钮从DropDownList中删除一个项目。

我尝试使用javascript，但是我认为这不起作用，因为当我单击按钮时，什么也没有发生。

这是代码：

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

<div>
    <input type="submit"
           value="Enregistrer"
           id="btnSave"
           onclick="remove()" />
</div>

<script type="text/javascript">    
    function remove() {
        var rm = document.getElementById('btnSave');
        var poste = document.getElementById('poste');

        poste.removeItem(); 
    }
</script>

Answer 1

使用原始JavaScript，您可以执行以下操作：

<script type="text/javascript">    
    function removeOption() {
       var posteElement = document.getElementById('poste');        
       var currentIndex = posteElement.selectedIndex;

       posteElement.removeChild(posteElement[currentIndex]);
       return false;
    }
</script>

这就是您所需要的。 还要确保将函数重命名为remove()以外的任何其他名称：

<input type="submit"
       value="Enregistrer"
       id="btnSave"
       onclick="removeOption()" />

看看这个（不是很好的inline-fiddle ）。

但是，我强烈建议至少研究一下诸如jquery之类的库（这比使用vanilla.js容易得多）。 查看Andre的答案。

Answer 2

1. 生成的HTML将为select元素提供ID“ SelectedPoste”，而不是您尝试设置的ID“ poste”。

2. 使用remove删除项目。

将您的JavaScript更改为：

var poste = document.getElementById('SelectedPoste');

poste.remove(poste.selectedIndex); 

编辑：选择生成的HTML将是：

<select id="poste" name="SelectedPoste">...</select>

这两行中的任何一条都将获得该元素：

var poste = document.getElementById('poste');

要么

var poste = document.getElementById('SelectedPoste');

（IE10中的最新情况）

然后，要从列表中删除所选项目，请执行以下操作：

poste.remove(poste.selectedIndex);

这不会删除按钮:)

编辑2：像Dimitar的答案一样，您需要将函数名称从remove更改为其他名称。

完成此操作后，以上代码将在IE和Chrome中运行。

Answer 3

使用jQuery

<select id="poste">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<br />

<input type="button" id="btnSave" value="Remove current item" />

<script type="text/javascript">
    $(function () {
        $('#btnSave').click(function () {
            $('#poste option:selected').remove();
            return false;
        });
    });
</script>

编辑 ：使用jQuery绑定click事件

Answer 4

尝试这个：

$("#poste option[value='X']").each(function() {
    $(this).remove();
});

或更简洁地说，这也将起作用：

$("#poste option[value='X']").remove();

例：

$("#btnSave").click(function(){
   $("#poste option[value='X']").remove();
});

记住要使用JQuery :)