1

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

4 回答 4

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

于 2013-05-23T19:13:29.073 回答
2

使用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 容易得多）。查看安德烈的答案。

于 2013-05-23T19:01:24.620 回答
2

  1. 生成的 HTML 将为选择元素提供“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 中运行。

于 2013-05-23T19:09:22.747 回答
2

尝试这个：

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

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

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

例子：

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

记得使用JQuery :)

于 2013-05-24T08:53:30.507 回答