Can an Option in a Select tag carry multiple values

Question

I got a select tag with some options in a HTML form   the data will be collected and processed using PHP   Testing    lt select name  Testing  gt       lt option value  1  gt  One      lt option value  2  gt  Two      lt option value  3  gt  Three  lt  select gt    Is it possible for an option to carry multiple values like when a user selects  One   then a few other values related to this option will be written to the Database   How should I design the select Tag so that each of the options can carry one than one value like this    lt select name  Testing  gt       lt option value  1  value  2010  gt  One      lt option value  2  value  2122  gt  Two      lt option value  3  value  0  gt  Three  lt  select gt

User · Answer

What about html data attributes  That s the easiest way  Reference from w3school  In your case   x000D   x000D     select   on  change   function     x000D    alert  value a is        select option selected   data  valuea     x000D        nvalue b is        select option selected   data  valueb   x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 0 jquery min js  gt  lt  script gt  x000D   lt select name  Testing  gt  x000D     lt option value  1  data-valuea  2010  data-valueb  2011  gt  One x000D       lt option value  2  data-valuea  2122  data-valueb  2123  gt  Two x000D         lt option value  3  data-valuea  0  data-valueb  1  gt  Three x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Use a delimiter to separate the values    lt select name  myValues  gt   lt option value  one two  gt   lt  select gt    lt  php gt   value   filter input INPUT POST   myValues     exploded value   explode       value    value one    exploded value 0    value two    exploded value 1     gt

User · Answer

Instead of storing the options on the client-side  another way to do this is to store the options as sub-array elements of an associative indexed array on the server-side  The values of the select tag would then just contain the keys used to dereference the sub-array   Here is some example code  This is written in PHP since the OP mentioned PHP  but it can be adapted to whatever server-side language you are using    lt FORM action    method  POST  gt       lt SELECT NAME  Testing  gt             lt OPTION VALUE  1  gt  One  lt  OPTION gt            lt OPTION VALUE  2  gt  Two  lt  OPTION gt           lt OPTION VALUE  3  gt  Three  lt  OPTION gt       lt  SELECT gt   lt  FORM gt    PHP    lt  php  options   array      1   gt  array  value1    gt   1    value2    gt   2010        2   gt  array  value1    gt   2    value2    gt   2122        3   gt  array  value1    gt   3    value2    gt   0       echo  Selected option value 1       options   POST  Testing     value1       lt br gt    echo  Selected option value 2       options   POST  Testing     value2       lt br gt

User · Answer

Duplicate tag parameters are not allowed in HTML  What you could do  is VALUE  1 2010   But you would have to parse the value on the server

User · Answer

This may or may not be useful to others  but for my particular use case I just wanted additional parameters to be passed back from the form when the option was selected - these parameters had the same values for all options  so    my solution was to include hidden inputs in the form with the select  like    lt FORM action    method  POST  gt       lt INPUT TYPE  hidden  NAME  OTHERP1  VALUE  P1VALUE  gt       lt INPUT TYPE  hidden  NAME  OTHERP2  VALUE  P2VALUE  gt       lt SELECT NAME  Testing  gt             lt OPTION VALUE  1  gt  One  lt  OPTION gt            lt OPTION VALUE  2  gt  Two  lt  OPTION gt           lt OPTION VALUE  3  gt  Three  lt  OPTION gt       lt  SELECT gt   lt  FORM gt    Maybe obvious    more obvious after you see it

User · Answer

In HTML   lt SELECT NAME  Testing  id  Testing  gt       lt OPTION VALUE  1 2010  gt  One      lt OPTION VALUE  2 2122  gt  Two      lt OPTION VALUE  3 0  gt  Three  lt  SELECT gt    For JS    var valueOne      Testing   val   split      0     var valueTwo      Testing   val   split      1     console log valueOne     output 1   console log valueTwo     output 2010   OR FOR PHP     selectedValue  explode       value      valueOne   exploded value 0     output 1    valueTwo   exploded value 1     output 2010

User · Answer

I was actually wondering this today  and I achieved it by using the php explode function  like this   HTML Form  in a file I named  doublevalue php         lt form name  car form  method  post  action  doublevalue action php  gt               lt select name  car  id  car  gt                       lt option value    gt Select Car lt  option gt                       lt option value  BMW Red  gt Red BMW lt  option gt                       lt option value  Mercedes Black  gt Black Mercedes lt  option gt               lt  select gt               lt input type  submit  name  submit  id  submit  value  submit  gt       lt  form gt    PHP action  in a file I named doublevalue action php        lt  php              result     POST  car                 result explode   explode       result               echo  Model      result explode 0    lt br   gt                echo  Colour      result explode 1    lt br   gt          gt    As you can see in the first piece of code  we re creating a standard HTML select box  with 2 options  Each option has 1 value  which has a separator  in this instance       to split the values  in this case  model and colour    On the action page  I m exploding the results into an array  then calling each one  As you can see  I ve separated and labelled them so you can see the effect this is causing    I hope this helps someone

User · Answer

When I need to do this  I make the other values data-values and then use js to assign them to a hidden input   lt select id select gt   lt option value 1 data-othervalue 2 data-someothervalue 3 gt         lt  select gt    lt input type hidden name otherValue id otherValue   gt   lt input type hidden name someOtherValue id someOtherValue   gt    lt script gt      select   change function      var otherValue   this  find  option selected   attr  data-othervalue    var someOtherValue   this  find  option selected   attr  data-someothervalue        otherValue   val otherValue       someOtherValue   val someOtherValue        lt  script gt

User · Answer

you can use multiple attribute    lt SELECT NAME  Testing  multiple gt      lt OPTION VALUE  1  gt  One     lt OPTION VALUE  2  gt  Two     lt OPTION VALUE  3  gt  Three

User · Answer

If you re goal is to write this information to the database  then why do you need to have a primary value and  related  values in the value attribute   Why not just send the primary value to the database and let the relational nature of the database take care of the rest   If you need to have multiple values in your OPTIONs  try a delimiter that isn t very common    lt OPTION VALUE  1 2010  gt One lt  OPTION gt         or add an object literal  JSON format     lt OPTION VALUE    primary   1   secondary   2010    gt One lt  OPTION gt         It really depends on what you re trying to do

User · Answer

One way to do this  first one an array  2nd an object        lt select name    gt           lt option value    num sequence   0 1 2 3    gt Option one lt  option gt           lt option value    foo   bar   one   two    gt Option two lt  option gt       lt  select gt    Edited  3 years after answering  to put both values into JSON format  using JSON stringify    because of a complaint that my proof-of-concept answer  could confuse a newbie developer

User · Answer

one option is to put multi value with comma seperated  like   value   123 1234    and in the server side separate them

User · Answer

put values for each options like    lt SELECT NAME  val  gt      lt OPTION VALUE  1  value  1 2 3 4  gt  1-4       lt OPTION VALUE  2  value  5 6 7 8  gt  5-8       lt OPTION VALUE  3  value  9 10 11 12  gt  9-12  lt  SELECT gt    at server side in case of php  use functions like explode  array    explode  delimeter   posted value      values   explode       POST  val     the above code return an array have only the numbers and the     get removed

User · Answer

its possible to have multiple values in a select option as shown below    lt select id  ddlEmployee  class  form-control  gt       lt option value    gt -- Select -- lt  option gt       lt option value  1  data-city  Washington  data-doj  20-06-2011  gt John lt  option gt       lt option value  2  data-city  California  data-doj  10-05-2015  gt Clif lt  option gt       lt option value  3  data-city  Delhi  data-doj  01-01-2008  gt Alexander lt  option gt   lt  select gt    you can get selected value on change event using jquery as shown below       ddlEmployee   change function           alert   this  find   selected   data  city           You can find more details in this LINK

User · Answer

I did this by using data attributes  Is a lot cleaner than other methods attempting to explode etc   HTML   lt select class  example  gt       lt option value  1  data-value  A  gt One lt  option gt       lt option value  2  data-value  B  gt Two lt  option gt       lt option value  3  data-value  C  gt Three lt  option gt       lt option value  4  data-value  D  gt Four lt  option gt   lt  select gt    JS     select example   change function          var other val      select example option value        this  val           data  value         console log other val

[html] Can an Option in a Select tag carry multiple values?

Examples related to html

Examples related to options