jQuery Set Select Index


259

Saya memiliki kotak pilih:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Saya ingin menetapkan salah satu opsi sebagai "terpilih" berdasarkan indeks yang dipilih itu.

Misalnya, jika saya mencoba mengatur "Nomor 3", saya mencoba ini:

$('#selectBox')[3].attr('selected', 'selected');

Tetapi ini tidak berhasil. Bagaimana saya bisa mengatur opsi yang dipilih berdasarkan indeks itu menggunakan jQuery?

Terima kasih!


2
Ini hampir persis sama dengan pertanyaan Anda sebelumnya: stackoverflow.com/questions/1280369/...
Kobi

Jawaban:


452

CATATAN : jawaban tergantung pada jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Terima kasih atas komentarnya, .gettidak akan berfungsi karena mengembalikan elemen DOM, bukan jQuery. Ingatlah bahwa .eqfungsi ini dapat digunakan di luar pemilih juga jika Anda mau.

$('#selectBox option').eq(3).prop('selected', true);

Anda juga dapat lebih singkat / mudah dibaca jika Anda ingin menggunakan nilainya , daripada mengandalkan memilih indeks tertentu :

$("#selectBox").val("3");

Catatan: .val(3) berfungsi dengan baik untuk contoh ini, tetapi nilai non-numerik harus berupa string, jadi saya memilih string untuk konsistensi.
(mis. <option value="hello">Number3</option>mengharuskan Anda untuk menggunakan .val("hello"))


7
+1 - Opsi kedua bekerja untuk saya. Jawaban yang dipilih oleh John Kugelman tidak bekerja untuk saya di IE7.
P.Brian.Mackey

2
Sedihnya, tidak ada satu pun dari cara ini yang memunculkan perubahan () untuk saya. Saya punya $ ('# selectBox'). Change (function () {alert ('diubah')});
mike jones

28
@mikejones - itu karena desain. Saat Anda secara terprogram mengatur opsi yang dipilih, Anda mungkin tidak selalu ingin acara perubahan terikat dipicu (seperti pada acara pemuatan halaman.) Untuk menyelesaikan jquery itu diserahkan kepada pengembang untuk memutuskan. Dalam kasus Anda, Anda cukup memanggil $ ('# selectBox'). Change (); setelah Anda memanggil $ ('# selectBox'). val ("3");
Marcus Pope

2
Apakah opsi pertama 0 atau 1?
Lee Meador

3
Saya pikir layak menyebutkan bahwa post-jQuery 1.6.1, metode yang direkomendasikan untuk memodifikasi properti boolean dari suatu elemen .prop()daripada .attr().
DevlshOne

113

Ini mungkin juga berguna, jadi saya pikir saya akan menambahkannya di sini.

Jika Anda ingin memilih nilai berdasarkan nilai item dan bukan indeks item itu maka Anda dapat melakukan hal berikut:

Daftar pilihan Anda:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

Item yang dipilih akan menjadi "Nomor 2" sekarang.


catatan: ada garis bawah tambahan setelah $ () ... jika tidak, ini bekerja dengan fantastis
Dusty J

1
+1 Saya tidak bisa menjalankan ini dengan tepat, tetapi dari sini saya akhirnya bisa bekerja dengan sintaks berikut: $ ("# selectBox option [value = 'C']") [0]. Terpilih = true;
Wes Grant

5
.attr('selected', 'selected')Perlu diketahui bahwa tidak boleh digunakan beberapa kali pada pilih yang sama, karena beberapa browser dapat menjadi bingung (dalam beberapa kasus mereka mulai menandai beberapa item dalam dom sebagai selected=selected". Jika Anda perlu mengubah nilai yang dipilih lebih sering (misalnya pada tombol klik) gunakan .prop('selected', true)seperti yang disarankan oleh Marc - Hanya memiliki banyak rasa sakit - dan membuang-buang waktu - karena masalah ini!
Tom Fink

66

Coba ini sebagai gantinya:

$("#selectBox").val(3);

2
Ini membuat penyalinan dari satu elemen ke elemen mati lainnya menjadi mudah juga!
Sonny

typo: after "selectBox Anda kehilangan penawaran
Niels Bom

1
Ini sederhana dan mudah. Saya lebih suka solusi ini.
Dan Bailiff

Ini berfungsi di Chrome, tetapi tidak berfungsi untuk saya dengan IE9. Saya menggunakan: $ ('# selectBox option') [3] .selected = true; (jawaban seans).
cederlof

FWIW, Ini bahkan tidak berfungsi di Chrome untuk saya. Menggunakan jawaban ": nth-child" bekerja untuk saya.
Jay Taylor

50

Lebih sederhana:

$('#selectBox option')[3].selected = true;

1
Ini bekerja untuk saya, saya juga perlu memilih oleh INDEX bukan VALUE.
Alan

1
Jawaban ini memberi saya apa yang saya butuhkan .. Saya kehilangan bagian 'opsi' dari pemilih ketika mencoba untuk memilih berdasarkan nama $ ('pilih [nama = "select_name"] opsi) [indeks] .selected = true;
Smith Smithy

16
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

ketika Anda ingin memilih dengan cara teratas untuk mengatur pilihan, Anda dapat menggunakan
$('#select option').removeAttr('selected');untuk menghapus pilihan sebelumnya.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

+1 untuk: $ ('# pilih opsi'). RemoveAttr ('terpilih'); opsi paling sederhana untuk mengembalikan item 'terpilih' ke atas, atau tidak ada pilihan yang ditentukan.
Michael Trouw

11

Apa yang penting untuk dipahami adalah bahwa val()untuk suatu selectelemen mengembalikan nilai opsi yang dipilih, tetapi bukan jumlah elemen seperti halnya selectedIndexdalam javascript.

Untuk memilih opsi dengan value="7"Anda cukup menggunakan:

$('#selectBox').val(7); //this will select the option with value 7.

Untuk membatalkan pilihan, gunakan array kosong:

$('#selectBox').val([]); //this is the best way to deselect the options

Dan tentu saja Anda dapat memilih beberapa opsi *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Namun untuk memilih beberapa opsi, <select>elemen Anda harus memiliki MULTIPLEatribut, jika tidak maka tidak akan berfungsi.


11

Saya selalu mengalami masalah dengan prop ('terpilih'), berikut ini selalu berhasil untuk saya:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

8

Coba ini:

$('select#mySelect').prop('selectedIndex', optionIndex);

Akhirnya, memicu acara .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

6

Semoga ini bisa membantu juga

$('#selectBox option[value="3"]').attr('selected', true);


4

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

salah, array deference memberi Anda objek dom, bukan objek jquery, sehingga akan gagal dengan TypeError, misalnya dalam FF dengan: "$ ('# selectBox option') [3] .attr () bukan fungsi . "


4

Untuk memperjelas jawaban Marc dan John Kugelman, Anda dapat menggunakan:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() tidak akan berfungsi jika digunakan dengan cara yang ditentukan karena mendapat objek DOM, bukan objek jQuery, jadi solusi berikut tidak akan berfungsi:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()mendapat filter set jQuery ke elemen dengan indeks yang ditentukan. Ini lebih jelas daripada $($('#selectBox option').get(3)). Tidak semua yang efisien. $($('#selectBox option')[3])lebih efisien (lihat test case ).

Anda sebenarnya tidak membutuhkan objek jQuery. Ini akan melakukan trik:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Satu hal lain yang sangat penting:

Atribut "terpilih" bukanlah bagaimana Anda menentukan tombol radio yang dipilih (setidaknya di Firefox dan Chrome). Gunakan atribut "dicentang":

$('#selectBox option')[3].checked = true;

Hal yang sama berlaku untuk kotak centang.


4

Di 1.4.4 Anda mendapatkan kesalahan: $ ("# selectBox option") [3] .attr bukan fungsi

Ini bekerja: $('#name option:eq(idx)').attr('selected', true);

Di mana #nameid pilih dan idxadalah nilai opsi yang ingin Anda pilih.


4

Javascript murni SelectedIndex atribut adalah cara yang tepat untuk pergi karena, itu javascript murni dan bekerja lintas-browser:

$('#selectBox')[0].selectedIndex=4;

Berikut adalah demo jsfiddle dengan dua dropdown menggunakan satu untuk mengatur yang lain:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Anda juga dapat memanggil ini sebelum mengubahIndex yang dipilih jika yang Anda inginkan adalah atribut "terpilih" pada tag opsi (di sini adalah biola ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

2
//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

2

Saya sering menggunakan pemicu ('perubahan') untuk membuatnya bekerja

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Contoh dengan id select = selectA1 dan position_index = 0 (opsi frist di pilih):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

1
$('#selectBox option').get(3).attr('selected', 'selected')

Saat menggunakan hal di atas saya terus mendapatkan kesalahan dalam webkit (Chrome) yang mengatakan:

"UnEught TypeError: Objek # tidak memiliki metode 'attr'"

Sintaks ini menghentikan kesalahan-kesalahan itu.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

1

Pilih item berdasarkan nilai dalam daftar pilih (terutama jika nilai opsi memiliki spasi atau karakter aneh di dalamnya) dengan hanya melakukan ini:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Juga, jika Anda memiliki dropdown (bukan multi-pilih), Anda mungkin ingin melakukannya break;sehingga Anda tidak mendapatkan nilai pertama yang ditemukan ditimpa.


1

Saya membutuhkan solusi yang tidak memiliki nilai kode keras dalam file js; menggunakan selectedIndex. Sebagian besar solusi yang diberikan gagal satu browser. Tampaknya ini berfungsi di FF10 dan IE8 (dapatkah orang lain menguji dalam versi lain)

$("#selectBox").get(0).selectedIndex = 1; 

1

Jika Anda hanya ingin memilih item berdasarkan properti tertentu dari suatu item maka opsi jQuery ketik [prop = val] akan mendapatkan item itu. Sekarang saya tidak peduli dengan indeks saya hanya ingin item dengan nilainya.

$('#mySelect options[value=3]).attr('selected', 'selected');

1

Saya menghadapi masalah yang sama. Pertama, Anda harus melalui acara (yaitu acara mana yang terjadi terlebih dahulu).

Sebagai contoh:

Acara pertama menghasilkan kotak pilih dengan opsi.

Peristiwa kedua adalah memilih opsi default menggunakan fungsi apa pun seperti val () dll.

Anda harus memastikan bahwa acara Kedua harus terjadi setelah acara Pertama .

Untuk mencapai ini, ambil dua fungsi, misalkan generateSelectbox () (untuk membuat kotak pilih) dan selectDefaultOption ()

Anda perlu memastikan bahwa selectDefaultOption () harus dipanggil hanya setelah eksekusi generateSelectbox ()


1

Anda juga dapat memasukkan beberapa nilai jika kotak pilih Anda adalah multipl:

$('#selectBox').val(['A', 'B', 'C']);

0

Anda dapat mengatur nilai variabel pilihan pilih secara dinamis serta opsi akan dipilih. Anda dapat mencoba kode berikut

kode:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

KODE HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>


-2

Segera:

$("#selectBox").attr("selectedIndex",index)

di mana indeks adalah indeks yang dipilih sebagai bilangan bulat.


kode ini berfungsi $ ('# selectBox'). prop ({selectedIndex: diinginkanIndex})
jurijcz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.