Dapatkah Opsi dalam tag Select memiliki banyak nilai?

Saya mendapat tag pilih dengan beberapa opsi dalam bentuk HTML:
(data akan dikumpulkan dan diproses menggunakan PHP)

Pengujian:

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

Apakah mungkin untuk opsi untuk membawa beberapa nilai seperti ketika pengguna memilih "Satu", maka beberapa nilai lain yang terkait dengan opsi ini akan ditulis ke Database.

Bagaimana saya harus mendesain selectTag sehingga setiap opsi dapat memiliki satu dari satu nilai seperti ini:

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

Salah satu cara untuk melakukan ini, yang pertama sebuah array, yang kedua sebuah objek:

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

Diedit (3 tahun setelah menjawab) untuk memasukkan kedua nilai ke dalam format JSON (menggunakan JSON.stringify()) karena keluhan bahwa jawaban bukti konsep saya "dapat membingungkan pengembang pemula".

Saya benar-benar bertanya-tanya hari ini, dan saya mencapainya dengan menggunakan fungsi ledakan php, seperti ini:

Formulir HTML (dalam file yang saya beri nama '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>

Tindakan PHP (dalam file yang saya beri nama doublevalue_action.php)

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

Seperti yang Anda lihat di bagian pertama kode, kami membuat kotak pilih HTML standar, dengan 2 opsi. Setiap opsi memiliki 1 nilai, yang memiliki pemisah (dalam contoh ini, '|') untuk membagi nilai (dalam hal ini, model dan warna).

Di halaman tindakan, saya meledakkan hasil ke dalam array, lalu memanggil masing-masing. Seperti yang Anda lihat, saya telah memisahkan dan memberi label pada mereka sehingga Anda dapat melihat efek yang ditimbulkannya.

Saya harap ini membantu seseorang :)

mungkin untuk memiliki beberapa nilai dalam opsi pilih seperti yang ditunjukkan di bawah ini.

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

Anda bisa mendapatkan nilai yang dipilih pada acara perubahan menggunakan jquery seperti yang ditunjukkan di bawah ini.

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

Anda dapat menemukan detail lebih lanjut di LINK ini

salah satu pilihan adalah menempatkan multi nilai dengan dipisahkan koma

Suka

value ="123,1234"

dan di sisi server pisahkan mereka

Ketika saya perlu melakukan ini, saya membuat nilai data-nilai lain dan kemudian menggunakan js untuk menetapkannya ke input tersembunyi

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

Jika tujuan Anda adalah untuk menulis informasi ini ke database, lalu mengapa Anda harus memiliki nilai utama dan nilai 'terkait' di value atribut? Mengapa tidak mengirim nilai utama ke database dan membiarkan sifat relasional database mengurus sisanya.

Jika Anda perlu memiliki beberapa nilai dalam OPTIONs Anda , coba pembatas yang tidak terlalu umum:

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

...

atau tambahkan literal objek (format JSON):

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

...

Itu sangat tergantung pada apa yang Anda coba lakukan.

beri nilai untuk setiap opsi seperti

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

di sisi server dalam kasus php, gunakan fungsi seperti meledak [array] = meledak ([pembatas], [nilai yang diposting]);

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

kode di atas mengembalikan array hanya memiliki angka dan ':' dihapus

Saya melakukan ini dengan menggunakan atribut data. Jauh lebih bersih daripada metode lain yang mencoba meledak, dll.

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

});

Bagaimana dengan atribut data html? Itu cara termudah. Referensi dari w3school

Dalam kasus Anda

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

Gunakan pembatas untuk memisahkan nilai.

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

Dalam HTML

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

Untuk JS

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

ATAU UNTUK PHP

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

Parameter tag duplikat tidak diperbolehkan di HTML. Apa yang bisa Anda lakukan adalah VALUE="1,2010". Tetapi Anda harus mengurai nilai di server.

Alih-alih menyimpan opsi di sisi klien, cara lain untuk melakukannya adalah dengan menyimpan opsi sebagai elemen sub-larik dari larik asosiatif / terindeks di sisi server. Nilai dari tag pemilihan kemudian hanya akan berisi kunci yang digunakan untuk membedakan sub-larik.

Berikut beberapa contoh kode. Ini ditulis dalam PHP karena OP menyebutkan PHP, tetapi dapat disesuaikan dengan bahasa sisi server apa pun yang Anda gunakan:

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

Ini mungkin atau mungkin tidak berguna bagi orang lain, tetapi untuk kasus penggunaan khusus saya, saya hanya ingin parameter tambahan dikirimkan kembali dari formulir ketika opsi dipilih - parameter ini memiliki nilai yang sama untuk semua opsi, jadi ... solusi saya adalah memasukkan input tersembunyi dalam formulir dengan pilihan, seperti:

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

Mungkin sudah jelas ... lebih jelas setelah Anda melihatnya.

Anda dapat menggunakan beberapa atribut

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