multiple select with jquery

Question

<select id="example" name="example" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select>

<span class="click" id="1">one </span>
<span class="click" id="2">two </span>
<span class="click" id="3">three </span>
<span class="click" id="4">four </span>

$('.click').click( function() {
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

how can i make that use multiple select and if i click again span with background-color=red then css background-color is again white?

LIVE EXAMPLE:

http://jsfiddle.net/pUeue/28/

Sorry but I read your question 4 times and still no idea what you are asking for. — chaZm
– chaZm, Commented Aug 5, 2011 at 11:13

Steve Elliott · Accepted Answer · 2011-08-05 11:18:57Z

I assume you mean that click on multiple items successively results in multiple select options being selected, if this is the case then: This Fiddle will do the job for you. I switched to using a class as this is (a) better, and (b) easier. If you can't use a class, then it'd be easy enough to tweak. The main solution however is:

$('.click').click( function() {
    var item = $(this);

    if(item.hasClass('Active')) {   
        item.removeClass('Active');
        $('#example > [value="' + this.id + '"]').removeAttr('selected');
    }
    else {
        item.addClass('Active');
        $('#example > [value="' + this.id + '"]').attr('selected', 'true');
    }
});

Basically using .val() will select one item, what you need to do is set the "selected" property on the items you want to be selected, allowing multiple ones be selected at once. if you were using jQuery 1.6 or above, I would advise switching from attr/removeAttr to simply ".prop('selected', true/false); as selected is a DOM property.

betamax · Accepted Answer · 2011-08-05 11:12:54Z

0

You can set all .click elements backgrounds to white before you set the current one to red:

$('.click').click( function() {
    $('.click').css('background-color', '#FFF');
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

answered Aug 5, 2011 at 11:12

betamax

14.1k9 gold badges42 silver badges56 bronze badges

1 Comment

Kyle Rodgers Over a year ago

i would like the multiple select, this is for only one selected

gred · Accepted Answer · 2011-08-05 11:14:02Z

0

try this:

$('.click').click( function() {
    if($(this).css('background-color')=='red')
        $(this).css('background-color', 'white');
     if($(this).css('background-color')=='white')
        $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

answered Aug 5, 2011 at 11:14

gred

5374 silver badges17 bronze badges

Comments

Kanishka Panamaldeniya · Accepted Answer · 2011-08-05 11:14:52Z

0

$('.click').click( function() {
    $('.click').css('background-color', '#FFFFFF');
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

answered Aug 5, 2011 at 11:14

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

1 Comment

Kyle Rodgers Over a year ago

i would like the multiple select, this is for only one selected

Daniel Baulig · Accepted Answer · 2011-08-05 11:17:59Z

0

You can grab the select with any of the following selectors: select, select[mutliple=multiple], select#example.

Personally I'd go with the last one.

Toggling color can be achieved with these small snippet:

$('.click').click(function (e) {
  var target = $(this);
  target.css('background-color', ('red' === target.css('background-color') ? 'white' : 'red'));
});

answered Aug 5, 2011 at 11:17

Daniel Baulig

11.1k7 gold badges47 silver badges45 bronze badges

Collectives™ on Stack Overflow

multiple select with jquery

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related