Can an Option in a Select tag carry multiple values?


Html Problem Overview

I got a select tag with some options in a HTML form:
(the data will be collected and processed using PHP)


<select name="Testing">  
  <option value="1"> One  
  <option value="2"> Two  
  <option value="3"> Three

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:

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three

Html Solutions

Solution 1 - Html

One way to do this, first one an array, 2nd an object:

    <select name="">
        <option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
        <option value='{"foo":"bar","one":"two"}'>Option two</option>

Solution 2 - Html

I achieved it by using the PHP explode function, like this:

HTML Form (in a file I named 'doublevalue.php':

    <form name="car_form" method="post" action="doublevalue_action.php">
            <select name="car" id="car">
                    <option value="">Select Car</option>
                    <option value="BMW|Red">Red BMW</option>
                    <option value="Mercedes|Black">Black Mercedes</option>
            <input type="submit" name="submit" id="submit" value="submit">

PHP action (in a file I named doublevalue_action.php)

            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";

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.

Solution 3 - Html

its possible to have multiple values in a select option as shown below.

<select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>

you can get selected value on change event using jquery as shown below.

$("#ddlEmployee").change(function () {

You can find more details in this LINK

Solution 4 - Html

one option is to put multi value with comma seperated


value ="123,1234"

and in the server side separate them

Solution 5 - Html

When I need to do this, I make the other values data-values and then use js to assign them to a hidden input

<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>

<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />

$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');

Solution 6 - Html

What about html data attributes? That's the easiest way. Reference from w3school

In your case

$('select').on('change', function() {
  alert('value a is:' + $("select option:selected").data('valuea') +
    '\nvalue b is:' + $("select option:selected").data('valueb')

<script src=""></script>
<select name="Testing">
  <option value="1" data-valuea="2010" data-valueb="2011"> One
    <option value="2" data-valuea="2122" data-valueb="2123"> Two
      <option value="3" data-valuea="0" data-valueb="1"> Three

Solution 7 - Html

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:


or add an object literal (JSON format):

<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>

It really depends on what you're trying to do.

Solution 8 - Html

I did this by using data attributes. Is a lot cleaner than other methods attempting to explode etc.


<select class="example">
    <option value="1" data-value="A">One</option>
    <option value="2" data-value="B">Two</option>
    <option value="3" data-value="C">Three</option>
    <option value="4" data-value="D">Four</option>


$('select.example').change(function() {

    var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');



Solution 9 - Html


<SELECT NAME="Testing" id="Testing">  
  <OPTION VALUE="1,2010"> One  
  <OPTION VALUE="2,2122"> Two  
  <OPTION VALUE="3,0"> Three

For JS:

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

For PHP:

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010

Solution 10 - Html

Put values for each option like

   <OPTION value="1:2:3:4"> 1-4  
   <OPTION value="5:6:7:8"> 5-8  
   <OPTION value="9:10:11:12"> 9-12

At server side in case of PHP, use functions like explode [array] = explode([delimeter],[posted value]);

$values = explode(':',$_POST['val']

The above code returns an array that has only the numbers and the ':' get removed

Solution 11 - Html

Simplest way to do this:

<select name="demo_select">
    <option value='{"key1":"111","key2":"222"}'>option1</option>
    <option value='{"key1":"333","key2":"444"}'>option2</option>

on controller decode the request value as given below:

$values = json_decode($request->post('demo_select'));
$val1 = $values->key1;
$val2 = $values->key2;
echo "Value 1: ".$val1;
echo "Value 2: ".$val2;

output for the first option:

Value 1: 111
Value 2: 222

output for the second option:

Value 1: 333
Value 2: 444

Solution 12 - Html

Use a delimiter to separate the values.

<select name="myValues">
<option value="one|two">

$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];

Solution 13 - Html

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.

Solution 14 - Html

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:

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>


$options = array(
    1 => array('value1' => '1', 'value2' => '2010'),
    2 => array('value1' => '2', 'value2' => '2122'),
    3 => array('value1' => '3', 'value2' => '0'),
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';

Solution 15 - Html

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:

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>

Maybe obvious... more obvious after you see it.

Solution 16 - Html

        <select name="student" id="student">

                <option value="">Select Student</option>

                <option value="Student Name|Roll No">Student Name</option>


        <input type="submit" name="submit" id="submit" value="submit"></form>

Solution 17 - Html

i use data-attribute to get the value with simple javascript and blade template.

<select class="form-control" id="channelTitle" name="channelTitle" onchange="idChannels()">
                    @foreach($post['channels'] as $channels)
                        <option value="{{ $channels->channel_title }}" data-id="{{ $channels->channel_id }}">{{ $channels->channel_title }}</option>

the data-id result here

<div class="form-group">
                <strong>Channel Id:</strong>
                <input type="text" name="channelId" id="channelId" class="form-control" placeholder="Channel Id">


function idChannels(){
    var elem=document.getElementById("channelTitle");
    var id = elem.options[elem.selectedIndex].getAttribute('data-id');

    document.getElementById("channelId").value = id;
} </script>

Solution 18 - Html

you can use multiple attribute

<SELECT NAME="Testing" multiple>  
 <OPTION VALUE="1"> One  
 <OPTION VALUE="2"> Two  
 <OPTION VALUE="3"> Three


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser327712View Question on Stackoverflow
Solution 1 - HtmlRobustoView Answer on Stackoverflow
Solution 2 - HtmlNedraView Answer on Stackoverflow
Solution 3 - HtmlVaraView Answer on Stackoverflow
Solution 4 - HtmlHaim EvgiView Answer on Stackoverflow
Solution 5 - HtmlchiliNUTView Answer on Stackoverflow
Solution 6 - HtmlAnkitView Answer on Stackoverflow
Solution 7 - HtmlDavid HoersterView Answer on Stackoverflow
Solution 8 - HtmlJackView Answer on Stackoverflow
Solution 9 - Htmlkunal shaktawatView Answer on Stackoverflow
Solution 10 - HtmlJaison JustusView Answer on Stackoverflow
Solution 11 - HtmlSaud AhmadView Answer on Stackoverflow
Solution 12 - HtmlChad C.View Answer on Stackoverflow
Solution 13 - HtmlWitekView Answer on Stackoverflow
Solution 14 - HtmlCave JohnsonView Answer on Stackoverflow
Solution 15 - HtmlMangoCatView Answer on Stackoverflow
Solution 16 - HtmlChandan VermaView Answer on Stackoverflow
Solution 17 - Htmlreggi49View Answer on Stackoverflow
Solution 18 - HtmlAlex KumbhaniView Answer on Stackoverflow