ตัวเลือกในแท็ก Select สามารถมีหลายค่าได้หรือไม่?

ฉันได้รับแท็กที่เลือกพร้อมตัวเลือกบางอย่างในรูปแบบ HTML:
(ข้อมูลจะถูกรวบรวมและประมวลผลโดยใช้ PHP)

การทดสอบ:

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

เป็นไปได้หรือไม่ที่ตัวเลือกจะมีค่าหลายค่าเช่นเมื่อผู้ใช้เลือก "หนึ่ง" จากนั้นค่าอื่น ๆ ที่เกี่ยวข้องกับตัวเลือกนี้จะถูกเขียนลงในฐานข้อมูล

ฉันจะออกแบบselectแท็กอย่างไรเพื่อให้แต่ละตัวเลือกสามารถมีค่ามากกว่าหนึ่งค่าดังนี้:

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

วิธีหนึ่งในการทำสิ่งนี้อันดับแรกคืออาร์เรย์อันดับที่สองอ็อบเจกต์:

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

แก้ไข (3 ปีหลังจากตอบรับ) เพื่อใส่ทั้งสองค่าลงในรูปแบบ JSON (โดยใช้JSON.stringify()) เนื่องจากมีการร้องเรียนว่าคำตอบที่พิสูจน์แนวคิดของฉัน "อาจทำให้นักพัฒนามือใหม่สับสน"

วันนี้ฉันสงสัยจริงๆและฉันทำได้โดยใช้ฟังก์ชัน php Explode ดังนี้:

รูปแบบ HTML (ในไฟล์ฉันชื่อ '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 (ในไฟล์ฉันชื่อ doublevalue_action.php)

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

ดังที่คุณเห็นในโค้ดส่วนแรกเรากำลังสร้างกล่องเลือก HTML มาตรฐานโดยมี 2 ตัวเลือก แต่ละตัวเลือกมี 1 ค่าซึ่งมีตัวคั่น (ในกรณีนี้คือ '|') เพื่อแบ่งค่า (ในกรณีนี้คือรุ่นและสี)

ในหน้าการดำเนินการฉันกำลังขยายผลลัพธ์เป็นอาร์เรย์แล้วเรียกแต่ละรายการ อย่างที่คุณเห็นฉันได้แยกและติดป้ายกำกับไว้เพื่อให้คุณเห็นผลกระทบที่เกิดขึ้น

ฉันหวังว่านี่จะช่วยใครสักคน :)

เป็นไปได้ที่จะมีหลายค่าในตัวเลือกการเลือกดังที่แสดงด้านล่าง

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

คุณสามารถรับค่าที่เลือกในเหตุการณ์การเปลี่ยนแปลงโดยใช้ jquery ดังที่แสดงด้านล่าง

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

คุณสามารถดูรายละเอียดเพิ่มเติมได้ในLINKนี้

ทางเลือกหนึ่งคือใส่ค่าหลายค่าโดยคั่นด้วยเครื่องหมายจุลภาค

ชอบ

value ="123,1234"

และในฝั่งเซิร์ฟเวอร์จะแยกออก

เมื่อฉันต้องการทำสิ่งนี้ฉันสร้างค่าอื่น ๆ data-values ​​จากนั้นใช้ js เพื่อกำหนดให้กับอินพุตที่ซ่อนอยู่

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

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

<script>
$('#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);
});
</script>

หากคุณมีเป้าหมายที่จะเขียนข้อมูลนี้ลงในฐานข้อมูลเหตุใดคุณจึงต้องมีค่าหลักและค่า "ที่เกี่ยวข้อง" ในvalueแอตทริบิวต์ ทำไมไม่เพียงส่งค่าหลักไปยังฐานข้อมูลและปล่อยให้ลักษณะเชิงสัมพันธ์ของฐานข้อมูลดูแลส่วนที่เหลือ

หากคุณจำเป็นต้องมีหลายค่าในOPTIONs ของคุณให้ลองใช้ตัวคั่นที่ไม่ธรรมดามาก:

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

...

หรือเพิ่มออบเจ็กต์ลิเทอรัล (รูปแบบ JSON):

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

...

มันขึ้นอยู่กับสิ่งที่คุณพยายามทำจริงๆ

ใส่ค่าสำหรับแต่ละตัวเลือกเช่น

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

ที่ฝั่งเซิร์ฟเวอร์ในกรณีของ php ให้ใช้ฟังก์ชันเช่น Explode [array] = explode ([delimeter], [post value]);

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

โค้ดด้านบนส่งคืนอาร์เรย์มีเฉพาะตัวเลขและ ':' ถูกลบออก

ฉันทำได้โดยใช้แอตทริบิวต์ข้อมูล สะอาดกว่าวิธีอื่น ๆ ที่พยายามระเบิดเป็นต้น

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

});

สิ่งที่เกี่ยวกับแอตทริบิวต์ข้อมูล html นั่นเป็นวิธีที่ง่ายที่สุด อ้างอิงจากw3school

ในกรณีของคุณ

$('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>

ใช้ตัวคั่นเพื่อแยกค่า

<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];
?>

ใน HTML

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

สำหรับ JS

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

หรือสำหรับ PHP

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

ไม่อนุญาตให้ใช้พารามิเตอร์แท็กซ้ำใน HTML VALUE="1,2010"สิ่งที่คุณจะทำคือ แต่คุณจะต้องแยกวิเคราะห์ค่าบนเซิร์ฟเวอร์

แทนที่จะเก็บอ็อพชันไว้ที่ฝั่งไคลเอ็นต์วิธีอื่นในการทำเช่นนี้คือการจัดเก็บอ็อพชันเป็นอิลิเมนต์ย่อยของอาร์เรย์ที่เชื่อมโยง / จัดทำดัชนีไว้ที่ฝั่งเซิร์ฟเวอร์ จากนั้นค่าของแท็ก select จะมีเพียงคีย์ที่ใช้ในการยกเลิกการอ้างอิงอาร์เรย์ย่อย

นี่คือตัวอย่างโค้ด สิ่งนี้เขียนด้วย PHP เนื่องจาก OP กล่าวถึง PHP แต่สามารถปรับให้เข้ากับภาษาฝั่งเซิร์ฟเวอร์ที่คุณใช้:

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

สิ่งนี้อาจเป็นประโยชน์กับผู้อื่นหรือไม่ก็ได้ แต่สำหรับกรณีการใช้งานเฉพาะของฉันฉันแค่ต้องการให้พารามิเตอร์เพิ่มเติมถูกส่งกลับจากแบบฟอร์มเมื่อเลือกตัวเลือก - พารามิเตอร์เหล่านี้มีค่าเดียวกันสำหรับตัวเลือกทั้งหมดดังนั้น ... วิธีแก้ปัญหาของฉัน คือการรวมอินพุตที่ซ่อนอยู่ในรูปแบบด้วยตัวเลือกเช่น:

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

อาจจะชัดเจน ... ชัดเจนมากขึ้นหลังจากที่คุณเห็น

คุณสามารถใช้หลายแอตทริบิวต์

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