2

I have a multi select element in jQuery.

Here is an example.

<select multiple id="multiple">
    <option value="1" type="Alice">Option 1</option>
    <option value="2" type="Bob">Option 2</option>
</select>

I know I can get all the values that are selected by doing $("#multiple").val();

How can I also get the type attributes of the selected options?

Suneel Kumar
  • 1,650
  • 2
  • 21
  • 31
RagHaven
  • 4,156
  • 21
  • 72
  • 113
  • With HTML5 you can use `.selectedOptions`; it's a collection of `Option` elements from which you can get the attribute values. – Ja͢ck Jun 25 '14 at 01:40

5 Answers5

3

You need uses a pseudo option:selected and look every option selected:

$('#multiple').change(function(){
    var $value =$('option:selected',this).attr('type');
    console.log($value);
});

Or using the .each() like:

$('#multiple option:selected').each(function(){
    var $value =$(this).attr('type');
    console.log($value);
});

DEMO

DEMO With .each()

Wilfredo P
  • 4,070
  • 28
  • 46
  • 1
    would upvote this one but the OP asked about how to get the type attribute from the selected elements not the value... – jme11 Jun 25 '14 at 01:32
  • that still only gives me the value attribute. I want the type attribute. – RagHaven Jun 25 '14 at 01:33
  • Works fine, only problem I see is that when selecting through shift button instead of click, it doesn't work fine – imbondbaby Jun 25 '14 at 02:07
3

Try this:

$(document).on("change", "#multiple", function(){
    var ids = $(this).find('option:selected').map(function() {
        return $(this).attr('type');    
    }).get();
    console.log(ids);
});

JSFiddle:

http://jsfiddle.net/LFMG7/2/

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
  • The question is about *multiple* select box, i.e. more than element can be selected. – Ja͢ck Jun 25 '14 at 01:48
  • 1
    Yep, that looks better :) though, using a delegated event handler on document doesn't seem like the best way. – Ja͢ck Jun 25 '14 at 02:01
2

Probably the easiest is to use .map():

var types = $('#multiple > option:selected').map(function() {
    return this.getAttribute('type');
}).get();

Demo

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
1
var t = document.getElementById('multiple'), a = [], i;
for(i = 0; i < t.length; i++) {
    if(t[i].selected) a.push(t[i].getAttribute('type'));
}
// tested on IE8+, Chrome (Windows & Linux), Safari, Firefox (Windows & Linux), Opera

Fiddle

hex494D49
  • 9,109
  • 3
  • 38
  • 47
  • This will not select *all* selected options in one go. – Ja͢ck Jun 25 '14 at 01:46
  • @Jack Have you checked the provided fiddle? – hex494D49 Jun 25 '14 at 02:02
  • Are you trying to make it seem like you had this answer all along? ;-) in any case, are you sure that subscripting the ` – Ja͢ck Jun 25 '14 at 02:04
  • @Jack Well, you may see all the edits :). On the other hand, I'd be glad to know if my answer has a cross-browser issue. – hex494D49 Jun 25 '14 at 02:10
  • My point was that you updated your answer *after* my comment; subscripting the select element directly requires the HTML5 interfaces, so not all browsers will have support for this. – Ja͢ck Jun 25 '14 at 02:12
  • @Jack Of course I've got your point :). Well, I just tested the snippet on six browsers and it works. – hex494D49 Jun 25 '14 at 02:16
  • Yeah, but they're all recent browsers; don't expect this to work on IE8 though (yes, I know, it's "ancient" and all). – Ja͢ck Jun 25 '14 at 02:17
  • @Jack Are you kidding me? :) Just to let you know, I just tested the snippet on IE 8.0.6001 and it works. Of course it works :) – hex494D49 Jun 25 '14 at 02:25
  • Well, that comes as a surprise to me because the [specs](https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement#item()) mentions that it's an HTML5 thingie and I didn't have a Windows machine to test on, so thanks for testing that :) +1 – Ja͢ck Jun 25 '14 at 02:57
0

Perhaps something like this:

var myList = array();
$('#multiple option:selected').each(function(){
    myList.push({"val":$(this).val(), "type":$(this).attr("type")});
});
primehalo
  • 859
  • 1
  • 14
  • 26