jQuery is used to add more data to choose options.

Problem

I’m hoping this is a straightforward inquiry.

I have the standard select> box, which looks like this.

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

Using $(“#select”), I can access the selected value. val()) and the display value of the selected item (using $(“#select:selected”).text ().

But how can I save anything like an extra value in the option> tag? I’d like to be able to do something like option value=”3.1″ value2=”3.2″>other/option> to get the value2 attribute’s value (which would be 3.2 in the example).

Asked by jim smith

Solution #1

HTML Markup

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

Code

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Here’s a jQuery-based functioning example: http://jsfiddle.net/GsdCj/1/ http://jsfiddle.net/GsdCj/2/ This is a working example using basic JavaScript.

You can add extra data to components in a syntactically-valid manner that is also conveniently accessible from jQuery by using data attributes from HTML5.

Answered by Phrogz

Solution #2

It appears to me that you wish to create a new attribute. Do you wish to

<option value="2" value2="somethingElse">...

You have the ability to complete this task.

$(your selector).attr('value2', 'the value');

Then you can use it to get it back.

$(your selector).attr('value2')

It’s not going to be legal code, but I suppose it’ll suffice.

Answered by mikesir87

Solution #3

I came up with two examples based on what I believe your question is:

http://jsfiddle.net/grdn4/

For saving more values, take a look at this. It uses data attributes to store the other value:

http://jsfiddle.net/27qJP/1/

Answered by zsalzbank

Solution #4

HTML

<Select id="SDistrict" class="form-control">
    <option value="1" data-color="yellow" > Mango </option>
</select>

JS when initialized

   $('#SDistrict').selectize({
        create: false,
        sortField: 'text',
        onInitialize: function() {
            var s = this;
            this.revertSettings.$children.each(function() {
                $.extend(s.options[this.value], $(this).data());
            });
        },
        onChange: function(value) {
            var option = this.options[value];
            alert(option.text + ' color is ' + option.color);
        }
    });

With option, you can access the data attribute of the option tag. [data-attribute]

https://jsfiddle.net/shashank p/9cqoaeyt/3/ JS Fiddle: https://jsfiddle.net/shashank p/9cqoaeyt/3/

Answered by Shashank Pujari

Solution #5

HTML/JSP Markup:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

JQUERY CODE: CHANGE CHANGE CHANGE CHANGE CHANGE CHANGE

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

To have a libelle.val() or libelle.text element ()

Answered by Fadid

Post is based on https://stackoverflow.com/questions/4564659/adding-additional-data-to-select-options-using-jquery