Apa's cara termudah untuk menambahkan sebuah pilihan
untuk dropdown menggunakan jQuery?
Ini akan bekerja?
$("#mySelect").append('<option value=1>My option</option>');
Secara pribadi, saya lebih memilih sintaks ini untuk menambahkan pilihan:
$('#mySelect').append($('<option>', {
value: 1,
text: 'My option'
}));
Jika anda'kembali menambahkan pilihan dari koleksi barang-barang, anda dapat melakukan hal-hal berikut:
$.each(items, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text : item.text
}));
});
Ini TIDAK bekerja di IE8 (namun tidak di FF):
$("#selectList").append(new Option("option text", "value"));
Ini TIDAK bekerja:
var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);
Anda dapat menambahkan opsi menggunakan syntax berikut, anda Juga dapat berkunjung ke cara menangani opsi di jQuery untuk lebih jelasnya.
$('#pilih').append($('<option>', {nilai:1, teks:'Satu'}));
$('#pilih').append('<option value="1">Satu</option>');
var pilihan = Pilihan baru(teks, nilai); $('#pilih').append($(opsi));
Jika opsi nama atau nilai yang lebih dinamis, anda memenangkan't perlu khawatir tentang melarikan diri karakter khusus di dalamnya; dalam hal ini anda mungkin lebih suka sederhana DOM metode:
var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');
Anda dapat mencoba ini-
$('#selectID').append($('<option>',
{
value: value_variable,
text : text_variable
}));
Seperti ini-
for (i = 0; i < 10; i++)
{
$('#mySelect').append($('<option>',
{
value: i,
text : "Option "+i
}));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='mySelect'></select>
Atau coba ini-
$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );
Seperti ini-
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='mySelect'></select>
Ini hal yang sangat sederhana. Anda dapat melakukan ini dengan cara seperti ini
$('#select_id').append('<option value="five" selected="selected">Five</option>');
atau
$('#select_id').append($('<option>', {
value: 1,
text: 'One'
}));
Untuk membantu kinerja anda harus mencoba untuk hanya mengubah DOM sekali, bahkan lebih jadi jika anda menambahkan banyak pilihan.
var html = '';
for (var i = 0, len = data.length; i < len; ++i) {
html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}
$('#select').append(html);
Saya ingin menggunakan non jquery pendekatan:
mySelect.add(new Option('My option', 1));
Anda dapat menambahkan opsi dinamis menjadi dropdown seperti yang ditunjukkan pada contoh di bawah ini. Di sini, di contoh ini saya telah mengambil data array dan binded mereka array nilai dropdown seperti yang ditunjukkan dalam output screenshot
Output:
var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
var myselect = $('<select>');
$.each(resultData, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('#selectCity').append(myselect.html());
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<select id="selectCity">
</select>
var select = $('#myselect');
var newOptions = {
'red' : 'Red',
'blue' : 'Blue',
'green' : 'Green',
'yellow' : 'Yellow'
};
$('option', select).remove();
$.each(newOptions, function(text, key) {
var option = new Option(key, text);
select.append($(option));
});
Ada dua cara. Anda dapat menggunakan salah satu dari dua.
Pertama:
$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');
Kedua:
$.each(dataCollecton, function(val, text) {
options.append($('<option></option>').val(text.route).html(text.route));
});
Kami menemukan beberapa masalah ketika anda menambahkan opsi dan menggunakan jquery validate. Anda harus klik salah satu item dalam memilih beberapa daftar. Anda akan menambahkan kode ini untuk menangani:
$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");
$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected
$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected
Berdasarkan dule's jawaban untuk menambahkan koleksi item, a satu-liner untuk...di
juga akan bekerja keajaiban:
let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};
for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select id="selectCity"></select>
Kedua objek nilai-nilai dan indeks yang ditetapkan untuk opsi. Solusi ini bekerja bahkan di old jQuery (v1.4)!