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!

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

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.

Coba ini sebagai gantinya:

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

Lebih sederhana:

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

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

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.

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

Coba ini:

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

Akhirnya, memicu acara .change:

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

Semoga ini bisa membantu juga

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

pilih opsi ke-3

$('#selectBox').val($('#selectBox option').eq(2).val());

Contoh di jsfiddle

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

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.

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.

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

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

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

$('#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');

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.

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; 

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

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

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

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

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>

Segera:

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

di mana indeks adalah indeks yang dipilih sebagai bilangan bulat.