Periksa apakah opsi dipilih dengan jQuery, jika tidak pilih default

207

Menggunakan jQuery, bagaimana Anda memeriksa apakah ada opsi yang dipilih di menu pilih, dan jika tidak, tentukan salah satu opsi sebagai yang dipilih.

(Pilih dihasilkan dengan labirin fungsi PHP di aplikasi yang baru saja saya warisi, jadi ini adalah perbaikan cepat sementara saya memikirkannya :)

meleyal
sumber

Jawaban:

270

Meskipun saya tidak yakin tentang apa yang ingin Anda capai, sedikit kode ini bekerja untuk saya.

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>
Joe Lencioni
sumber
86
Pilihan akan lebih mudah dibaca seperti ini:$("#mySelect").val(3);
Jørn Schou-Rode
6
Ini membuat saya di jalur yang benar, tetapi saya perlu melakukan ini: $("#mySelect option")[2]['selected'] = true; Menemukannya setelah menyelidiki struktur objek di Firebug.
semperos
28
Pada jQuery 1.6 Anda dapat mengatur properti secara langsung. $("#mySelect").prop("selectedIndex", 2)
gradbot
1
Versi .val (x) tidak berfungsi di Internet Explorer 8, jadi @gradbot benar, karena ini berfungsi di semua Peramban.
Sorcy
30

Tidak perlu menggunakan jQuery untuk ini:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}
FlySwat
sumber
58
OP menyatakan, "Menggunakan jQuery ..." jadi sepertinya berlebihan untuk mengabaikan itu, bukan?
BryanH
13
Secara pribadi, jika saya mengajukan pertanyaan tertentu, saya ingin mendapatkan jawaban untuk pertanyaan daripada dengan cara yang berbeda.
vitto
18
Terkadang jawaban yang Anda cari bukanlah yang Anda harapkan.
MrBoJangles
5
Bagaimanapun, dia meminta jQuery, dan jawaban jQuery sedikit lebih mudah untuk dipahami, terutama jika seseorang tidak mengerti JavaScript dasar.
shmeeps
6
Cara terbaik untuk melakukannya, kadang-kadang basis javascript bisa sangat berguna!
Hallaghan
13

Pertanyaan ini sudah lama dan memiliki banyak pandangan, jadi saya hanya akan membuang beberapa hal di luar sana yang akan membantu beberapa orang yang saya yakin.

Untuk memeriksa apakah elemen pilih memiliki item yang dipilih:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

atau untuk memeriksa apakah suatu pilihan tidak ada yang dipilih:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

atau jika Anda berada dalam satu lingkaran semacam dan ingin memeriksa apakah elemen saat ini dipilih:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

untuk memeriksa apakah suatu elemen tidak dipilih saat dalam satu lingkaran:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

Ini adalah beberapa cara untuk melakukan ini. jQuery memiliki banyak cara berbeda untuk mencapai hal yang sama, jadi Anda biasanya memilih yang mana yang tampaknya paling efisien.

Gavin
sumber
"not" tidak berfungsi untuk saya $ ('# mySelect option'). masing-masing (function () {if ($ (this) .not (': selected')) {..}}); Jadi negasi aktif adalah seperti if (! $ (Ini) .is (': terpilih')) {..} Browser: Chrome; Versi Jquery: 3.1.1
Anil kumar
12

Jawaban lencioni adalah apa yang saya rekomendasikan. Anda dapat mengubah pemilih untuk opsi ('#mySelect option:last')untuk memilih opsi dengan nilai tertentu menggunakan " #mySelect option[value='yourDefaultValue']". Lebih lanjut tentang penyeleksi .

Jika Anda bekerja secara luas dengan daftar pilih pada klien, periksa plugin ini: http://www.texotela.co.uk/code/jquery/select/ . Lihatlah sumbernya jika Anda ingin melihat beberapa contoh bekerja dengan daftar pilih.

Alex Pendleton
sumber
9

Inilah fungsi saya mengubah opsi yang dipilih. Ini berfungsi untuk jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}
sata
sumber
7
<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

});
</script>
Ram Prasad
sumber
3

Mudah! Defaultnya harus menjadi opsi pertama. Selesai!Itu akan membawa Anda ke JavaScript yang tidak mencolok, karena JavaScript tidak diperlukan :)

JavaScript yang tidak mengganggu

Martin Labuschin
sumber
3

Saya sudah menemukan plugin texotela yang disebutkan, yang memungkinkan saya menyelesaikannya seperti ini:

$(document).ready(function(){
    if ( $("#context").selectedValues() == false) {
    $("#context").selectOptions("71");
    }
});
meleyal
sumber
2

Lihatlah indeks elemen yang dipilihselect . BTW, itu masalah DOM biasa, bukan khusus JQuery.

Hank Gay
sumber
2

Ini adalah skrip cepat yang saya temukan yang berfungsi ... .Hasil diberikan pada label.

$(".Result").html($("option:selected").text());
Joel
sumber
1

Kalian melakukan terlalu banyak untuk memilih. Cukup pilih berdasarkan nilai:

$("#mySelect").val( 3 );
giagejoe
sumber
2
Ini memilih opsi 3 terlepas dari apakah opsi lain sudah dipilih.
Jordan Ryan Moore
1
if (!$("#select").find("option:selected").length){
  //
}
Avinash Saini
sumber
1

Saya menemukan cara yang baik untuk memeriksa, jika opsi dipilih dan pilih default ketika tidak.

    if(!$('#some_select option[selected="selected"]').val()) {
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    }

Jika #some_select belum memilih opsi yang dipilih maka .val () tidak ditentukan

Marcin Bąk
sumber
0
$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option
pengguna420944
sumber
0
$("#select_box_id").children()[1].selected

Ini adalah cara lain untuk memeriksa opsi yang dipilih atau tidak di jquery. Ini akan mengembalikan Boolean (Benar atau Salah).

[1] adalah indeks opsi kotak pilih

Taimoor Changaiz
sumber
0

Ubah acara pada kotak pilih ke api dan setelah itu lakukan maka cukup tarik atribut id dari opsi yang dipilih: -

$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");

  switch (id){
    case "trade_buy_max":
      // do something here
      break;
  }
});
Akash Deep Singhal
sumber
0

Saya hanya mencari sesuatu yang serupa dan menemukan ini:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

Ini menemukan semua menu pilih di kelas yang belum memiliki opsi yang dipilih, dan memilih opsi default ("2" dalam kasus ini).

Saya mencoba menggunakan :selectedalih-alih [selected], tetapi itu tidak berhasil karena sesuatu selalu dipilih, bahkan jika tidak ada yang memiliki atribut

Steven Schoch
sumber
0

Jika Anda perlu secara eksplisit memeriksa setiap opsi untuk melihat apakah ada yang memiliki atribut "terpilih" Anda dapat melakukan ini. Jika tidak menggunakan option:selectedAnda akan mendapatkan nilai untuk opsi default pertama.

var viewport_selected = false;      
$('#viewport option').each(function() {
    if ($(this).attr("selected") == "selected") {
        viewport_selected = true;
    }
});
zeman
sumber