jquery select and unselect multiple input without ctrl click

Question

Here's the scenario:

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

I want to let user for example to click on Select 1 span, then click on Select 2 span and both options will be selected in multiple select. Then if user click Remove 1 select span, only Select 1 will be removed. I don't have an idea how to complete that task. When I create other click functions with #select2, #select3 (...), clicking on one select, removes option selected with last click. Same problem is with remove option. How to create Ctrl-click effect ?

Are you using this method only because you want users not having to press CTRL to select more than one options? Or is this some UI design decision? — Yanick Rochon, Dec 29 '12 at 21:28
this multiple select is in the form, the id values in options are dynamic id's from django template variables. And both things , i dont want users having to press CTRL, and it's UI design decision. Users will be presented with only this spans, and they want be able to see multiple select input, but it's values need to be send via form and be written into database — Chris, Dec 29 '12 at 21:33
have you ever heard of (shameless plug) [jQuery Multiselect](https://github.com/michael/multiselect) or it's [2.0](https://github.com/yanickrochon/jquery.multiselect-2) version (nearly completed)? — Yanick Rochon, Dec 29 '12 at 21:44

Jason Whitted · Answer 1 · 2012-12-29T21:38:16.653

If you had this 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/>

And used this javascript:

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

You will end up with the spans controlling the selected items in the multiple select list. It can be previewed in this jsfiddle.

I didn't post the correct version of the jsfiddle. The link has been fixed. — Jason Whitted, Dec 29 '12 at 21:38

score 3 · Answer 2 · answered Dec 29 '12 at 21:31

I have created an working example for you: 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);
});

score 3 · Accepted Answer · answered Dec 29 '12 at 21:40

You can generate your controls dynamically... (see 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>

Generating your own controls is not only a better solution, it avoids maintenance if you add/remove OPTION element in the list... and keep HTML shorter to download from the server if your selection grows.

Because the question was about using multiselection control **without** requiring users to press CTRL. — Yanick Rochon, Dec 29 '12 at 22:24

charlietfl · Answer 4 · 2012-12-29T22:15:16.523

First for control key use event.which http://api.jquery.com/event.which/

Following also uses data- attribute to define the item number:

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

If you change all your ID's to 2 classes like item_select and item_remove the following will manage the select tag when spans are clicked:

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)
});

DEMO: http://jsfiddle.net/pR9vj/6/

jquery select and unselect multiple input without ctrl click

4 Answers4

Linked