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

【问题标题】：jquery select and unselect multiple input without ctrl clickjquery选择和取消选择多个输入而无需ctrl单击
【发布时间】：2012-12-29 21:01:04
【问题描述】：

这是场景：

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

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

【问题讨论】：

您是否只是因为您希望用户不必按 CTRL 来选择多个选项而使用此方法？或者这是一些 UI 设计决定？
这个多选在表单中，选项中的id值是来自django模板变量的动态id。这两件事，我不希望用户必须按 CTRL，这是 UI 设计决定。用户只会看到这个跨度，他们希望能够看到多个选择输入，但它的值需要通过表单发送并写入数据库
你听说过（无耻插件）jQuery Multiselect 还是2.0 版本（即将完成）？
不，我没有，但现在试试看

标签： javascript jquery jquery-selectors

【解决方案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 以便从服务器下载。

【讨论】：

因为问题是关于使用多选控件而不要求用户按CTRL。

【解决方案2】：

我为您创建了一个工作示例：http://jsfiddle.net/Gajotres/WESdZ/

$("#select1, #select2, #select3, #select4").click(function(){
    $("#id_user option[value='" + $(this).attr('id').replace("select","") + "']").prop("selected", true);
});
$("#remove1, #remove2, #remove3, #remove4").click(function(){
    $("#id_user option[value='" + $(this).attr('id').replace("remove","") + "']").prop("selected", false);
});

【讨论】：

这正是我想要的！谢谢

【解决方案3】：

如果你有这个 HTML：

<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>
<br/>
<span class="select" value="1">Select 1 user</span> | <span class="remove" value="1">Remove 1 select</span><br/>
<span class="select" value="2">Select 2 user</span> | <span class="remove" value="2">Remove 2 select</span><br/>
<span class="select" value="3">Select 3 user</span> | <span class="remove" value="3">Remove 3 select</span><br/>
<span class="select" value="4">Select 4 user</span> | <span class="remove" value="4">Remove 4 select</span><br/>

并使用了这个javascript：

$(".select,.remove").click(function(){
    var option = $("#id_user").find("option[value='" + $(this).attr("value") + "']");
    option.prop("selected", $(this).is(".select"));
});

您最终会得到控制多选列表中所选项目的跨度。可以在this jsfiddle预览。

【讨论】：

我没有发布正确版本的 jsfiddle。链接已修复。

【解决方案4】：

首先供控制键使用event.whichhttp://api.jquery.com/event.which/

以下也使用data-属性来定义商品编号：

<span class="item_select" data-item="1">Select 1 user</span>

如果您将所有 ID 更改为 2 个类，例如 item_select 和 item_remove，则单击跨度时，以下将管理选择标签：

var ctrlKey = false;
$(document).on('keydown keyup',function(e) {
    if (e.which === 17) {
        ctrlKey = e.type=='keydown';
    }
});


var $user = $('#id_user')
$('.item_select,.item_remove ').click(function() {
    var isSelect = $(this).is('.item_select');
    /* reset if ctrl key not active*/
    if (!ctrlKey && isSelect) {
        $user.val('')
    }
    $user.find('option[value="' + $(this).data('item') + '"]').prop('selected', isSelect)
});

演示：http://jsfiddle.net/pR9vj/6/

【讨论】：