Can an Option in a Select tag carry multiple values?

user_327712 0
Viewed 298462

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

Testing:

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

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
</select>
html-select html
18 Answers

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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></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
</select>

user_63596700

In HTML:

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

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
user_56976860

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>
</select>

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
user_127522650

Use a delimiter to separate the values.

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

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

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">
    <INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
    <INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

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

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

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

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

        </select>

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

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>
                    @endforeach
                </select>

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">
            </div>

javascript

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

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