如何在asp.net MVC中使用JavaScript删除下拉列表中的项目

本文关键字：删除 JavaScript 下拉列表 项目 asp net MVC | 更新日期: 2023-09-27 18:15:17

我正在使用c#和SQL Server 2005开发一个asp.net MVC 3应用程序。

在视图中，我有一个下拉列表，一个按钮。

如何在每次点击按钮时从下拉列表中删除一个项目?

我尝试使用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>

如何在asp.net MVC中使用JavaScript删除下拉列表中的项目

使用 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>

EDIT:使用jQuery绑定click事件

  1. 生成的HTML将给select元素一个ID为"SelectedPoste"，而不是你想设置的"poste"。

  2. 使用remove删除项目

将javascript改为:

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

Edit:为select生成的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.

使用 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的回答

试试这个:

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

或者更简洁地说，这样也可以:

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

的例子:

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

记得使用:)

相关文章：