Menambahkan data tambahan untuk memilih opsi menggunakan jQuery

141

Pertanyaan yang sangat sederhana saya harap.

Saya memiliki <select>kotak biasa seperti ini

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

Saya bisa mendapatkan nilai yang dipilih (dengan menggunakan $("#select").val()) dan nilai tampilan item yang dipilih (dengan menggunakan $("#select :selected").text().

Tapi bagaimana saya bisa menyimpan seperti nilai tambahan di <option>tag? Saya ingin dapat melakukan sesuatu seperti <option value="3.1" value2="3.2">other</option>dan mendapatkan nilai value2atributnya (contohnya adalah 3,2).

javascript jquery html jim smith
sumber
Anda ingin menambahkan item ke kotak pilih? atau Anda ingin dapat memilih lebih dari satu sekaligus dan mendapatkan hasilnya?
zsalzbank
tidak, saya hanya ingin ada seperti nilai2 = "" di tag <option>, tapi itu tidak berhasil
jim smith
Pertanyaan Anda tidak jelas (bagi saya, bagaimanapun juga). Apa yang Anda maksud dengan "simpan nilai lain dalam opsi pilihan"? Apakah Anda bermaksud menambahkan opsi baru untuk dipilih, yang akan muncul kepada pengguna saat dibuka?
Phrogz
15
tidak menyangkal logika atau alasan, ya ampun. Saya memiliki pertanyaan / kasus serupa sehingga saya dapat membandingkan nilai antara pilihan dan menyimpan teks dari opsi seseorang ke opsi yang lain sambil mempertahankan nilai / teks pilihan itu, salah satu cara tampaknya mungkin adalah melalui data seperti yang ditunjukkan oleh jawaban di bawah ini. hanya karena ANDA tidak memikirkannya tidak berarti itu menentang logika dan alasan. OP adalah pertanyaan yang cukup layak, dia hanya perlu diarahkan ke arah yang benar, bukan segelas besar kepuasan.
pengguna1783229
1
Anda selalu dapat menambahkan sejumlah parameter tambahan menggunakan data-apa saja dan menggunakan .data ('apa saja') di mana pun Anda akan melakukan .value jika tidak. cukup tukar apa pun untuk nilai2 atau serupa dengan keinginan Anda

Jawaban:

323

Markup HTML

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

Kode

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Lihat ini sebagai contoh kerja menggunakan jQuery di sini: http://jsfiddle.net/GsdCj/1/
Lihat ini sebagai contoh kerja menggunakan JavaScript biasa di sini: http://jsfiddle.net/GsdCj/2/

Dengan menggunakan atribut data dari HTML5 Anda dapat menambahkan data ekstra ke elemen dengan cara yang valid secara sintaksis yang juga mudah diakses dari jQuery.

Phrogz
sumber
@jimith Ya, itu akan. (Jika Anda menemukan salah satu dari jawaban ini berguna, Anda harus memilihnya. Anda juga harus menandai satu sebagai "diterima" jika Anda menemukan bahwa itu paling baik menyelesaikan masalah Anda.)
Phrogz
1
Apa? Tidak, tidak akan. Ini akan bekerja di semua browser yang mendukung atribut data HTML5.
glomad
13
@ithcy Semua browser mendukung (dan memiliki selama 10+ tahun) atribut "tidak valid" dalam markup, dan mendapatkan / menyetelnya melalui DOM. Atribut "data" HTML5 hanyalah atribut khusus dengan skema penamaan dan standar baru yang mendeklarasikannya sebagai legal.
Phrogz
@Prog Saya tahu ini. Ini bukan masalah browser yang "mendukung" atribut tidak valid, melainkan masalah mengabaikannya. Benar-benar tidak ada cara lain untuk menulis browser web yang dapat digunakan :) Namun menurut saya sulit untuk menyebut atribut data "valid secara sintaksis" - itu tergantung pada konteks Anda. Jika Anda memiliki doctype HTML5, maka ya, itu valid. Jika tidak, mereka tidak dan akan menyebabkan validasi W3C gagal.
glomad
1
alih-alih selected.getAttribute('data-foo');Anda bisa menggunakanselected.dataset.foo
Vitaliy Markitanov
5

Bagi saya, sepertinya Anda ingin membuat atribut baru? Apa kau mau

<option value="2" value2="somethingElse">...

Untuk melakukan ini, Anda bisa melakukannya

$(your selector).attr('value2', 'the value');

Dan kemudian untuk mengambilnya, Anda bisa menggunakan

$(your selector).attr('value2')

Ini tidak akan menjadi kode yang valid, tapi saya rasa itu berhasil.

mikesir87
sumber
Metode lainnya adalah menggunakan $ (selector) .data ('value2', "your value") dan $ (selector) .data ('value2') untuk mengambil ... yang masih valid.
mikesir87
Yah, secara sintaksis tidak valid memiliki atribut non-standar di markup asli, tetapi a) Saya belum pernah melihat browser apa pun sejak zaman NS4 memiliki masalah dengan ini, dan b) jika Anda dapat memodifikasi DOM untuk menghasilkan sesuatu yang "tidak valid secara sintaks", benarkah?
Phrogz
ya, itu benar-benar ... tidak valid. mengapa menggunakan properti sewenang-wenang ketika properti data- * telah ditentukan dalam standar html5.
stephenbayer
3
Seperti yang disebutkan @stephenbayer ... cara yang benar untuk melakukannya sekarang adalah menggunakan properti data- * yang didukung html5. Properti tersebut tidak benar-benar ada / banyak digunakan ketika awalnya dijawab pada tahun 2010 :)
mikesir87
-1

Markup HTML / JSP:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

KODE JQUERY: Acara: perubahan

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

Untuk memiliki elemen libelle.val () atau libelle.text ()

Fadid
sumber
<form: option data-libelle-compte = "$ {compte.libelle} data-raison =" $ {compte.raison} "data-compte =" $ {compte.numero} "> <c: out value =" $ {compte.libelleCompte} MAD "/> </ form: option>
Fadid
-4

Untuk menyimpan nilai lain dalam pilihan pilihan:

$("#select").append('<option value="4">another</option>')
Kyle
sumber