发表新帖
发表新帖

Can an Option in a Select tag carry multiple values?

前端 未结
关注
15 2268
执念已碎
执念已碎 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:46

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

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

    0 讨论(0)
  • 既然无缘
    2020-11-22 17:46

    put values for each options like 

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

    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

    0 讨论(0)
  • 你的背包
    2020-11-22 17:47

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

    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

    0 讨论(0)
  • 青春惊慌失措
    2020-11-22 17:48

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

        <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>
            </select>
            <input type="submit" name="submit" id="submit" value="submit">
    </form>

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

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

    I hope this helps someone :)

    0 讨论(0)
  • 無奈伤痛
    2020-11-22 17:50

    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.

    0 讨论(0)
    • 1 2 3 下一页
     看不清?
    提交回复
    热议问题