javascript - jquery选择和取消选择多个输入而无需ctrl单击

Question

场景如下:

<select id="id_user" name="user" multiple="multiple">
    <option value="1">User 1</option>
    <option value="2">User 2</option>
    <option value="3">User 3</option>
    <option value="4">User 4</option>
</select>

<span id="select1">Select 1 user</span> <span id="remove1">Remove 1 select</span>
<span id="select2">Select 2 user</span> <span id="remove2">Remove 2 select</span>
<span id="select3">Select 3 user</span> <span id="remove3">Remove 3 select</span>
<span id="select4">Select 4 user</span> <span id="remove4">Remove 4 select</span>

<script type="text/javascript">
    $("#select1").click(function(){ $("#id_user").val("1").prop("selected", true);

    ???

    });
    $("#remove1").click(function(){ $("#id_user").val("1").prop("selected", false);

    ???

    });
</script>

例如，我想让用户点击选择 1 跨度，然后点击选择 2 跨度，两个选项将在多选中被选中。然后，如果用户单击 Remove 1 select span，则只会删除 Select 1。我不知道如何完成该任务。当我使用#select2、#select3 (...) 创建其他点击功能时，点击一个选择，删除最后一次点击选择的选项。同样的问题是删除选项。如何制作Ctrl-click效果？

Answer 1

您可以动态生成控件...(参见 live demo):

<div id="selectControls"></div>

<script type="text/javascript">
$(function() {
    $('#id_user > option').each(function() {
        var $this = $(this);
        $('#selectControls').append($('<span></span>')
            .text("Select " + $this.val() + " user")
            .click(function() { $this.attr('selected', true); $('#id_user').focus(); })
        ).append('&nbsp;').append($('<span></span>')
            .text("Deselect " + $this.val() + " user")
            .click(function() { $this.removeAttr('selected'); $('#id_user').focus(); })
        ).append('<br />');
    });
});
</script>

生成您自己的控件不仅是一个更好的解决方案，如果您在列表中添加/删除 OPTION 元素，它还可以避免维护...并且如果您的选择增加，可以缩短从服务器下载的 HTML .