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
– Yanick Rochon, Commented Dec 29, 2012 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
– Chris, Commented Dec 29, 2012 at 21:33
have you ever heard of (shameless plug) jQuery Multiselect or it's 2.0 version (nearly completed)? — Yanick Rochon
– Yanick Rochon, Commented Dec 29, 2012 at 21:44

Yanick Rochon · Accepted Answer · 2012-12-29 21:40:15Z

3

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.

answered Dec 29, 2012 at 21:40

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yanick Rochon Over a year ago

Because the question was about using multiselection control without requiring users to press CTRL.

Gajotres · Accepted Answer · 2012-12-29 21:31:12Z

3

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

answered Dec 29, 2012 at 21:31

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Comments

Jason Whitted · Accepted Answer · 2012-12-29 21:38:16Z

3

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.

edited Dec 29, 2012 at 21:38

answered Dec 29, 2012 at 21:30

Jason Whitted

4,0141 gold badge18 silver badges16 bronze badges

1 Comment

Jason Whitted Over a year ago

I didn't post the correct version of the jsfiddle. The link has been fixed.

charlietfl · Accepted Answer · 2012-12-29 22:15:16Z

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/

Collectives™ on Stack Overflow

jquery select and unselect multiple input without ctrl click

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related