Can an Option in a Select tag carry multiple values?

前端 未结 15 2270
执念已碎
执念已碎 2020-11-22 17:42

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

Testing:


                        
    
提交评论

  • 2020-11-22 17:52

    one option is to put multi value with comma seperated

    like

    value ="123,1234"
    

    and in the server side separate them

    0 讨论(0)
  • 2020-11-22 17:54

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

    HTML

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

    JS

    $('select.example').change(function() {
    
        var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');
    
        console.log(other_val);
    
    });
    
    0 讨论(0)
  • 2020-11-22 17:56

    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
    

    OR FOR PHP

      $selectedValue= explode(',', $value);
      $valueOne= $exploded_value[0]; //output 1
      $valueTwo= $exploded_value[1]; //output 2010
    
    0 讨论(0)
  • 2020-11-22 18:06

    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>
        </SELECT>
    </FORM>
    

    PHP:

    <?php
    $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>';
    
    0 讨论(0)
  • 2020-11-22 18:07

    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:

    <OPTION VALUE="1|2010">One</OPTION>
    

    ...

    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.

    0 讨论(0)
  • 提交回复
    热议问题