jQuery select2 mendapatkan nilai tag pilih?

95

Halo teman-teman ini kode saya:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

Ini adalah kode select2 saya:

$("#first").select2();

Di bawah ini adalah kode untuk mendapatkan nilai yang dipilih.

$("#first").select2('val'); // It returns first,second,three.

Ini adalah mengembalikan teks seperti first,second,threedan saya ingin mendapatkannya 1,2,3.
Berarti saya membutuhkan nilai kotak pilih, bukan teks.

Renish Khunt
sumber
Bisakah Anda memberikan JSFiddle? Ini akan sangat berguna.
Ionică Bizău
1
pertanyaan tidak jelas. tepatnya apa yang kamu inginkan?
Hiral

Jawaban:

149
$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.
seseorang
sumber
5
$ ("# pertama"). val (); // itu mengembalikan 1,2,3 ATAU $ ("# first"). select2 ('val'); // itu kembali pertama, kedua, tiga
Renish Khunt
$ ("# pertama"). val (); akan mengembalikan 1,2,3 (mana pun yang dipilih) dan Anda dapat memposting kode di function select2 () untuk lebih jelasnya.
kadang
untuk pilihan yang dipanggil dengan nama id alih-alih nama kelas, gunakan: $ (". first"). val ()
Rui Martins
@Ruizin salah. ID disebut dengan "#" dan kelas disebut dengan ".", Jadi untuk memanggil dengan ID, Anda akan menggunakan $ ("# first"). Val () dan untuk CLASS Anda akan menggunakan $ (". First" ) .val ()
Source Matters
58

Untuk mendapatkan elemen Select, Anda dapat menggunakan $('#first').val();

Untuk mendapatkan teks dari nilai yang dipilih - $('#first :selected').text();

Bisakah Anda memposting select2()kode fungsi Anda

Krish R
sumber
1
$ ("# pertama"). val (); // itu mengembalikan 1,2,3 ATAU $ ("# first"). select2 ('val'); // itu kembali pertama, kedua, tiga
Renish Khunt
Saya tidak yakin, saya mengerti pertanyaan Anda.
Krish R
1
ketika saya menggunakan plugin select2 maka saya mendapatkan nilai menggunakan $ ("# first"). val (). itu tidak mengembalikan apapun itu kembali kosong.
Renish Khunt
Bisakah Anda memberikan contoh biola dengan plugin Anda?
Krish R
1
Saya harus menggunakan $('#first :selected').text();opsi lain adalah mengembalikan semua opsi yang memungkinkan.
Jeff Bluemel
35

$("#first").select2('data') akan mengembalikan semua data sebagai peta

wawa
sumber
1
Sangat berguna jika Anda memiliki properti tambahan pada objek select2
Sepatu
9

Jika Anda menggunakan ajax , Anda mungkin ingin mendapatkan nilai yang diperbarui dari pemilihan tepat setelah pemilihan.

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

Penghargaan: Steven-Johnston

Johny Pie
sumber
Hai, bolehkah saya tahu dari mana currentTargetasalnya? tidak ada contoh ID / nama Anda yang terkait dengan Pertanyaan. Jadi saya tidak bisa berhubungan di mana pun.
mastersuse
8

Solusi ini memungkinkan Anda untuk melupakan elemen terpilih. Bermanfaat bila Anda tidak memiliki id pada elemen tertentu.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});
Steven Johnston
sumber
4

Jawaban sederhananya adalah:

$('#first').select2().val()

dan Anda juga dapat menulis dengan cara ini:

 $('#first').val()
Rajiv Sharma
sumber
3

Coba ini :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option
Fahmi Imanudin
sumber
@RenishKhunt jawaban di sini tidak hanya untuk Anda (orang yang mengajukan pertanyaan), tetapi juga untuk orang lain yang melihat halaman ini. Dan semakin banyak solusi berbeda yang dikirimkan di sini, pilihan yang lebih baik dimiliki orang lain, sekali lagi: bukan hanya Anda :)
infografnet
Ya, saya minta maaf. Terima kasih, @infografnet dan Terima kasih banyak Fahmi Imanudin telah memposting jawaban :)
Renish Khunt
2

Lihat biola ini .
Pada dasarnya, Anda ingin mendapatkan values dari option-tags Anda , tetapi Anda selalu mencoba mendapatkan nilai select-node Anda dengan $("#first").val().

Jadi kita harus memilih tag-opsi dan kita akan menggunakan pemilih jQuerys:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")memilih setiap optionyang merupakan anak elemen dengan id first.

KeyNone
sumber
$ ("# pertama"). val (); // itu mengembalikan 1,2,3 ATAU $ ("# first"). select2 ('val'); // itu kembali pertama, kedua, tiga
Renish Khunt
Sepertinya saya salah menjawab pertanyaan Anda, maka harap jelaskan dengan tepat apa yang ingin Anda capai.
KeyNone
ketika saya menggunakan plugin select2 maka saya mendapatkan nilai menggunakan $ ("# first"). val (). itu tidak mengembalikan apapun itu kembali kosong.
Renish Khunt
Lihat biola ini . Bekerja dengan sangat baik untuk saya. (Saya menambahkan select2.js di bawah sumber daya eksternal, meskipun saya tidak tahu mengapa kotak terlihat jelek).
KeyNone
kuncinya adalah Anda mengatakan bahwa kami ingin mendapatkan nilai dari tag opsi!
Darius.V
0

Jawaban lain tidak berfungsi untuk saya, jadi saya mengembangkan solusi:

Saya membuat opsi dengan class = "option-item" untuk memudahkan penargetan

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

Kemudian untuk setiap opsi yang dipilih saya menambahkan properti display none

CSS:

option:checked {
   display: none;
}

Sekarang kita dapat menambahkan perubahan ke SelectBox kita untuk menemukan opsi yang kita pilih dengan properti display none dengan simple : hidden atribut

JQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

Biola kerja: https://jsfiddle.net/Friiz/2dk4003j/10/

Bartosz Was
sumber
0

Solusi:

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();
Hafzullah YILDIRIM
sumber