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

【问题标题】：How to remove an item in DropDownList in ASP MVC using JavaScript如何使用 JavaScript 在 ASP MVC 中删除 DropDownList 中的项目
【发布时间】：2013-05-23 18:48:36
【问题描述】：

我正在使用 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>

【问题讨论】：

您能否确认从您的Html.DropDownListFor 生成的 HTML 实际上的 ID 是“poste”而不是“SelectedPoste”？
是的，我用其他 JS 代码尝试过，但是禁用了下拉列表并且它工作正常
我可以发布一个使用 jQuery 库的答案吗？这会让这件事变得容易得多。

标签： c# javascript visual-studio-2010 asp.net-mvc-3

【解决方案1】：

使用 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绑定点击事件

【讨论】：

@anouar 你引用过 jQuery 脚本吗？
好吧，如果你使用 jquery，你不妨在这里绑定按钮的偶数，而不是与 html 混合 :) +1 虽然
@DimitarDimitrov 你去 =)
@anouar 更新了，现在有一个新的return false;
@anouar 您必须在那边的function(){...} 内部执行此操作。它不会神奇地做到这一点=)

【解决方案2】：

生成的 HTML 将为选择元素提供“SelectedPoste”的 ID，而不是您尝试设置的“poste”。
使用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 中运行了。

【讨论】：

请看我的代码，我没有选择，我将如何输入名称？
您的Html.DropDownListFor 将生成我上面提到的
谷歌浏览器将删除带有我上面的javascript代码的按钮。 IE 按预期工作。

【解决方案3】：

使用 vanilla 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 是整个select，而不是option。 OP 想删除当前选中的option
@DimitarDimitrov 很高兴为您提供帮助。 +1 回答和善意
还是同样的问题:(((
@DimitarDimitrov 抱歉，您的解决方案正在运行，但单击按钮后页面正在刷新
@anouar 好的，首先删除你以前的 cmets，因为这个线程太长了......其次，当你使用 jquery 时究竟消失了什么，你如何解决你的问题并拥有我看一下

【解决方案4】：

试试这个：

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

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

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

例子：

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

记得使用 JQuery :)

【讨论】：