Adding additional data to select options using jQuery

Question

Very simple question I hope   I have the usual  lt select gt  box like this   lt select id  select  gt       lt option value  1  gt this lt  option gt       lt option value  2  gt that lt  option gt       lt option value  3  gt other lt  option gt   lt  select gt    I can get the selected value  by using     select   val    and the selected item s display value  by using     select  selected   text     But how can I store like an additional value in the  lt option gt  tag  I would like to be able to do something like  lt option value  3 1  value2  3 2  gt other lt  option gt  and get the value of the value2 attribute  which would be 3 2 in the example

User · Accepted Answer

HTML Markup   lt select id  select  gt     lt option value  1  data-foo  dogs  gt this lt  option gt     lt option value  2  data-foo  cats  gt that lt  option gt     lt option value  3  data-foo  gerbils  gt other lt  option gt   lt  select gt    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      See this as a working sample using jQuery here  http   jsfiddle net GsdCj 1  See this as a working sample using plain JavaScript here  http   jsfiddle net GsdCj 2   By using data attributes from HTML5 you can add extra data to elements in a syntactically-valid manner that is also easily accessible from jQuery

User · Answer

I made two examples from what I think your question might be   http   jsfiddle net grdn4   Check this out for storing additional values   It uses data attributes to store the other value   http   jsfiddle net 27qJP 1

User · Answer

To store another value in select options       select   append   lt option value  4  gt another lt  option gt

User · Answer

HTML JSP Markup    lt form option  data-libelle    compte libelleCompte    data-raison    compte libelleSociale     data-rib    compte numeroCompte                                 lt c out value    compte libelleCompte   MAD    gt   lt  form option gt    JQUERY CODE  Event  change  var  this     this   var  selectedOption    this find  option selected    var libelle    selectedOption data  libelle      To have  a element libelle val   or libelle text

User · Answer

To me  it sounds like you want to create a new attribute   Do you want    lt option value  2  value2  somethingElse  gt       To do this  you can do    your selector  attr  value2    the value      And then to retrieve it  you can use    your selector  attr  value2     It s not going to be valid code  but I guess it does the job

User · Answer

HTML  lt Select id  quot SDistrict quot  class  quot form-control quot  gt       lt option value  quot 1 quot  data-color  quot yellow quot   gt  Mango  lt  option gt   lt  select gt   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                      You can access data attribute of option tag with option  data-attribute  JS Fiddle   https   jsfiddle net shashank p 9cqoaeyt 3

[javascript] Adding additional data to select options using jQuery

Examples related to javascript

Examples related to jquery

Examples related to html