Saya memiliki pilih
lapangan dengan beberapa pilihan di dalamnya. Sekarang saya harus memilih salah satu dari orang-orang pilihan
dengan jQuery. Tapi bagaimana saya bisa melakukannya jika saya hanya tahu nilai
dari pilihan
yang harus dipilih?
Saya memiliki HTML berikut:
<div class="id_100">
<select>
<option value="val1">Val 1</option>
<option value="val2">Val 2</option>
<option value="val3">Val 3</option>
</select>
</div>
Saya perlu untuk memilih opsi dengan nilai val2
. Bagaimana hal ini dapat dilakukan?
Berikut ini's sebuah halaman demo:
Ada's cara yang lebih mudah yang doesn't mengharuskan anda untuk pergi ke pilihan tag:
$("div.id_100 select").val("val2");
Check out ini metode jQuery.
Gunakan ubah()
peristiwa setelah memilih nilai. Dari docs:
Jika lapangan kehilangan fokus tanpa isi bisa berubah, acara ini tidak dipicu. Untuk memicu acara secara manual, berlaku
.perubahan()
tanpa argumen:
$("#select_id").val("val2").change();
Informasi lebih lanjut di .perubahan().
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
<option value="1">Completed</option>
<option value="2">Pending</option>
<option value="3">Cancelled</option>
<option value="4">Failed</option>
<option value="5">In Progress</option>
<option value="6">Overdue</option>
<option value="7">Refunded</option>
Pengaturan untuk Status Pending dengan nilai
$('#contribution_status_id').val("2");
Saya pikir cara termudah adalah memilih untuk set val(), tetapi anda dapat memeriksa berikut. Melihat Cara menangani pilih dan pilihan tag di jQuery? untuk rincian lebih lanjut tentang pilihan.
$('div.id_100 option[value="val2"]').prop("selected", true);
$('id_100').val('val2');
Tidak dioptimalkan, tapi logika berikut ini juga berguna dalam beberapa kasus.
$('.id_100 option').each(function() {
if($(this).val() == 'val2') {
$(this).prop("selected", true);
}
});
Anda dapat memilih pada setiap atribut dan nilai dengan menggunakan atribut selector [namaatribut=optionalvalue]
, sehingga dalam kasus anda, anda dapat memilih opsi dan set atribut yang dipilih.
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
Di mana nilai
adalah nilai yang ingin anda pilih dengan.
Jika anda perlu untuk dihapus sebelumnya dipilih nilai-nilai, seperti yang akan terjadi jika hal ini digunakan beberapa kali anda'a perlu mengubah sedikit sehingga untuk pertama menghapus atribut yang dipilih
$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
.prop("selected",true);
jawaban yang sederhana adalah, di html
<select name="ukuran" id="idUkuran">
<option value="1000">pilih ukuran</option>
<option value="11">M</option>
<option value="12">L</option>
<option value="13">XL</option>
</select>
pada jquery, panggilan berikut fungsi dengan tombol atau apapun
$('#idUkuran').val(11).change();
hal ini sederhana dan 100% bekerja, coz yang diambil dari pekerjaan saya... :) harap membantu..
It's lebih baik menggunakan ubah()
setelah pengaturan pilih nilai.
$("div.id_100 select").val("val2").change();
Dengan melakukan ini, kode akan menutup untuk mengubah pilih oleh pengguna, penjelasan ini termasuk dalam [JS Fiddle](
):[JS Fiddle](
)Cara termudah untuk melakukannya adalah:
<select name="dept">
<option value="">Which department does this doctor belong to?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>
$('select[name="dept"]').val('3');
Output: Ini akan mengaktifkan ENT.
$('#graphtype pilihan[value=""]').prop("yang dipilih", true);
Ini bekerja dengan baik di mana #graphtype
adalah id pilih tag.
contoh pilih tag:
<select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
<option value="" selected>Site</option>
<option value="sitea">SiteA</option>
<option value="siteb">SiteB</option>
</select>
Ada's tidak ada alasan untuk berpikir, semua yang anda lakukan adalah mengakses dan mengatur properti. Yang's ini.
Oke, jadi beberapa dasar dom: Jika anda melakukan ini dalam lurus JavaScript, maka anda akan ini:
window.document.getElementById('my_stuff').selectedIndex = 4;
Tapi anda're tidak melakukannya dengan lurus JavaScript, anda're melakukannya dengan jQuery. Dan di jQuery, anda ingin gunakan .prop() fungsi untuk mengatur properti, sehingga anda akan melakukannya seperti ini:
$("#my_stuff").prop('selectedIndex', 4);
Pokoknya, pastikan anda memiliki id yang unik. Jika tidak, anda'akan membenturkan kepala anda di dinding bertanya-tanya mengapa ini tidak't bekerja.
Gunakan:
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
Ini bekerja untuk saya. I'm menggunakan kode ini untuk parsing nilai dalam fancybox update form, dan saya penuh sumber dari app.js adalah:
jQuery(".fancybox-btn-upd").click(function(){
var ebid = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: js_base_url+"manajemen_cms/get_ebook_data",
data: {ebookid:ebid},
success: function(transport){
var re = jQuery.parseJSON(transport);
jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
document.getElementById("upd-nama").setAttribute('value',re['judul']);
document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);
var content = jQuery("#fancybox-form-upd").html();
jQuery.fancybox({
type: 'ajax',
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
content: content,
helpers: {
title: {
type: 'inside'
}
}
});
}
});
});
Dan saya kode PHP:
function get_ebook_data()
{
$ebkid = $this->input->post('ebookid');
$rs = $this->mod_manajemen->get_ebook_detail($ebkid);
$hasil['id'] = $ebkid;
foreach ($rs as $row) {
$hasil['judul'] = $row->ebook_judul;
$hasil['kategori'] = $row->ebook_cat_id;
$hasil['penerbit'] = $row->ebook_penerbit;
$hasil['terbit'] = $row->ebook_terbit;
$hasil['halaman'] = $row->ebook_halaman;
$hasil['bahasa'] = $row->ebook_bahasa;
$hasil['format'] = $row->ebook_format;
}
$this->output->set_output(json_encode($hasil));
}
.attr() kadang-kadang doesn't bekerja lebih tua jQuery versi, tetapi anda dapat menggunakan .prop():
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
$(this).prop('selected','selected');
return;
}
});
Mencoba ini. Sederhana namun efektif javaScript + jQuery mematikan combo.
SelectComponent :
<select id="YourSelectComponentID">
<option value="0">Apple</option>
<option value="2">Banana</option>
<option value="3">Cat</option>
<option value="4">Dolphin</option>
</select>
Seleksi :
document.getElementById("YourSelectComponentID").value = 4;
Sekarang pilihan anda 4 akan dipilih. Anda dapat melakukan ini, untuk memilih nilai-nilai pada layar mulai secara default.
$(function(){
document.getElementById("YourSelectComponentID").value = 4;
});
atau membuat sebuah fungsi sederhana menempatkan garis di dalamnya dan memanggil fungsi pada anyEvent untuk memilih pilihan
Campuran jQuery + javaScript melakukan keajaiban....