Dapatkah Opsi dalam tag Select memiliki banyak nilai?

104

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>
pengguna327712
sumber
1
apakah Anda menggunakan php sebagai skrip server untuk diproses
Jaison Justus
1
hanya penasaran kenapa kamu membutuhkan ini?
Salil
2
@Tokopedia Karena penasaran apakah mungkin untuk melakukannya
pengguna327712
stackoverflow.com/questions/38180525/… Bekerja untuk saya.
Caio Andrian

Jawaban:

153

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

Robusto
sumber
9
1 untuk solusi elegan. NB Jika Anda menggunakan opsi dua, maka saya sarankan Anda menggunakan $ .parseJSON ($ (this) .val ()) dalam acara perubahan untuk mendapatkan objek javascript, dengan asumsi Anda perlu mendapatkan setiap nilai secara terpisah.
Lucas B
1
-1 karena jawaban ini menyebabkan OP mengalami masalah keamanan besar dalam kodenya saat mengevaluasi input. Cara terbaik untuk menghindarinya adalah menggunakan JSON, seperti yang disarankan oleh @DavidHoerster, karena masukan berperilaku lebih baik.
fotanus
5
@fotanus: Contoh kedua saya adalah objek JSON literal tidak berbeda dari apa yang diajukan pertanyaan lain. Adapun array, itu hanya sebuah contoh. Ini adalah tanggung jawab kode sisi server untuk membersihkan nilai input.
Robusto
1
@Robo contoh kedua bukanlah JSON yang valid. Di sisi lain, ini adalah hash ruby. Masalah saya dengan jawaban Anda bukanlah tentang apa yang Anda jelaskan atau ketahui (karena saya yakin Anda tahu bagaimana membuat ini aman), ini tentang apa yang dihilangkan dan dapat membingungkan pengembang pemula (seperti yang terjadi dengan salah satu teman saya).
fotanus
11
Solusi bagus, tetapi untuk string yang akan diurai menjadi JSON, nama properti harus memiliki tanda kutip ganda, seperti: value = '{"foo": "bar", "one": "two"}'
Lars-Lasse
52

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

Nedra
sumber
1
Saya menemukan metode ini sangat sederhana dan sangat membantu, tetapi saya bertanya-tanya apakah metode ini didukung oleh semua browser?
Waiyl Karim
terlihat sangat sederhana dan efisien. Terima kasih
Varun Garg
Brilian, Luar Biasa, Luar Biasa .. permata kelas.
pengguna3370889
3
@WaiylKarim Tidak ada alasan mengapa ini tidak bisa bekerja di semua browser. Browser seharusnya tidak peduli dengan apa yang ada di nilainya .. Dan jika mereka memiliki masalah dengan beberapa simbol di dalamnya, tidak ada masalah untuk memilih yang lain. Seperti titik atau # atau _ atau karakter apa pun yang dapat digunakan sebagai pembatas di sisi server
Risinek
solusi terbaik untuk saya
fizzi
25

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

Vara
sumber
16

salah satu pilihan adalah menempatkan multi nilai dengan dipisahkan koma

Suka

value ="123,1234"

dan di sisi server pisahkan mereka

Haim Evgi
sumber
bagaimana cara memisahkannya di sisi server? (dalam php)
Muhammad Ashfaq
seperti fungsi meledak
Haim Evgi
12

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>
cabai
sumber
1
Ini membuat saya ikut ambil bagian - juga, dapat menggunakan .data () untuk mengembalikannya jika Anda sudah memiliki elemen (vs melakukan kueri pemilih). misalnya myElem.data ('othervalue')
jsh
2
Secara teknis ini bukan yang diminta OP, tetapi 100% apa yang saya coba capai ketika saya datang mencari di sini. +1 untuk jalur yang lebih sederhana dan lebih baik ke apa yang saya asumsikan sebagai tujuan akhir hanya menyimpan dua bagian data dalam opsi pilih.
Kapur
5

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.

David Hoerster
sumber
4

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

Jaison Justus
sumber
4

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

});
Mendongkrak
sumber
4

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>

Ankit
sumber
1
"data-" diperlukan agar ini berfungsi, dan bagian kedua harus menggunakan huruf kecil.
Arun Prasad ES
1

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];
?>
Chad C.
sumber
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
kunal shaktawat
sumber
0

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

Witek
sumber
0

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>';
Kodos Johnson
sumber
0

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.

MangoCat
sumber
-5

Anda dapat menggunakan beberapa atribut

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

Alex Kumbhani
sumber
Dia menginginkan banyak bit informasi dari satu pilihan, bukan banyak pilihan.
Barmar