Question

我有一个选择框，我想用jquery从中删除所选的选项。请告诉我如何使这个工作：这是标记的代码：

@foreach (var item in Model.Names)
            {
                <div>                        
                    <div class="editor-field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
                    </div>
                    <div>  
                    <a href="#" id="remove">Remove selection</a>  
                    </div>  
                </div>
            }

有三个选择框，我需要添加一个超链接来删除选择。在此先感谢Laziale

Answer 1

首先，您应该将id="remove"更改为class="remove"，因为您将拥有多个这些元素，并且多次使用相同ID的HTML无效。

您可以使用jQuery选择锚标记并绑定一个事件处理程序，删除锚的父元素（也包含<select>元素）：

$(function () {
    $('.remove').on('click', function () {
        $(this).parent().parent().remove();
        return false;
    });
});

以下是演示：http://jsfiddle.net/7SueN/2/

请注意，.on()是jQuery 1.7中的新功能，在这种情况下与使用.bind()相同：http://api.jquery.com/on

如果您只想删除与每个链接相关联的<select>元素，您可以将其定位以进行删除：

$(function () {
    $('.remove').on('click', function () {
        $(this).parent().parent().find('select').remove();
        return false;
    });
});

以下是演示：http://jsfiddle.net/7SueN/1/

更新

我只是重新阅读了您的问题，如果您想在删除链接时删除所选的索引：

$(function () {
    $('.remove').on('click', function () {

        var $select = $(this).parent().parent().find('select');
        $select.children().filter(':selected').remove();
        return false;
    });
});

以下是演示：http://jsfiddle.net/7SueN/

Answer 2

工作小提琴

http://jsfiddle.net/GFdP6/1/

标记

@foreach (var item in Model.Names)
{
   <div class="listContainer">                        
        <div class="editor-field">
           <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
        </div>
        <div>  
           <a href="#" class="remove">Remove selection</a>  
        </div>  
   </div>
}

JQuery的

$('.remove').click(function(){    
    $(this).closest('.listContainer').find('select').find(':selected').remove();
});

Answer 3

是否要删除所选内容或所选元素？

由于已经回答了元素的删除，所以只是选择：

$('.remove').click(function(){    
  $(this).closest('select').children().is(':selected').prop("selected",null);
});

编辑：

$('.remove').click(function(){    
  $(this).parent().prev().find('option:selected').prop("selected",null);
});

使用jquery从选择框中删除选择

3 个答案:

更新

工作小提琴

标记

JQuery的