Bir açılır menü seçeneği belirlemek için jQuery nasıl kullanılır?

157

<option>Bir açılır kutuda 4. öğeyi seçmek için jQuery almak mümkün olup olmadığını merak ediyordum ?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Kullanıcının bir bağlantıyı tıklatmasını ve ardından <select>kutunun değerini değiştirmesini istiyorum, sanki kullanıcı tıklatarak seçmiş gibi <option>.

— sapık
kaynak

4

seçeneklerinizin bir değeri var mı?

— Victor

184

Peki ya

$('select>option:eq(3)').attr('selected', true);

http://www.jsfiddle.net/gaby/CWvwn/ adresindeki örnek

jquery modern versiyonları için kullanmanız gereken .prop()yerine.attr()

$('select>option:eq(3)').prop('selected', true);

http://jsfiddle.net/gaby/CWvwn/1763/ adresindeki örnek

— Gabriele Petrioli
kaynak

3

imo bu bile çalışmamalı; bir seçeneğin seçilen durumu bunun yerine

— seçimin

1

selectElement.selectedIndex = index;Jack'in anlamı budur.

— rlemon

@rlemon, anlıyorum, ancak öznitelik kullanıldığında selectedIndexçoklu seçim multipleiçin kullanılamıyor. Ve seçilen öğeleri ayarlamanın normal ( html ) yolu, öğelerin selectedniteliğidir option.

— Gabriele Petrioli

@ GabyakaG.Petrioli Normal yol, selectedher bir ilgili optionselemanın özelliğini true(ve isteğe bağlı olarak geri kalanını falseaçıkça) ayarlamaktır. Birden çok seçim aslında oldukça kötü :)

— Ja͢ck

6

@ sunnyiitkgp onchangeDeğer programlı olarak değiştirildiğinde etkinlik asla tetiklenmez. .trigger('change')Sonunda da olayı

— tetiklemek

149

Çözüm:

$("#element-id").val('the value of the option');

— Harold Sota
kaynak

2

selectedHTML'deki seçeneği ayarlamaz .

— Ahmad hamza

54

HTML seçme öğelerinin, selectedIndexbelirli bir seçeneği belirlemek için yazılabilecek bir özelliği vardır:

$('select').prop('selectedIndex', 3); // select 4th option

Sade JavaScript kullanarak aşağıdakiler elde edilebilir:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

— kriko
kaynak

7

Bu kabul edilen cevap olmalı ... En güzel ve en temiz çözüm gibi gözüküyor ...

— Denys Séguret

1

Sorun 'değişim' olayını başlatmamasıdır.

— Guy Korland

2

@GuyKorland Bu, burada gösterilen diğer cevapların hiçbiri ile olmaz ; bir etkinliğin başlatılmasını istiyorsanız, bunu manuel olarak yapmanız gerekir.

— Ja͢ck

1

@Jack Kısa bir yolu var mı? Bulduğum tek yol: var fireEvent = function (selectElement) {if (selectElement) {if (selectElement içinde "fireEvent") {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("değişiklik", yanlış, doğru); selectElement.dispatchEvent (EVT); }}}

— Guy Korland

4

@GuyKorland jQuery bunun için açığa çıkarır .trigger(), ancak bunu zaten kodla yaptığınızdan, değişiklik işleyicilerini kendiniz çağırmak da kolay olacaktır.

— Ja͢ck

30

Bu şekilde yaparım

 $("#idElement").val('optionValue').trigger('change');

— franzisk
kaynak

3

seçilen cevap bu olmalı

— Uzumaki Naruto

2

$ ("# idElement"). val ('optionValue'). change () da işe yarayabilir

— Ullullu

24

seçeneklerinizin bir değeri varsa, bunu yapabilirsiniz:

$('select').val("the-value-of-the-option-you-want-to-select");

'select', seçiminizin kimliği veya bir sınıf seçicisi olacaktır. veya yalnızca bir seçim varsa etiketi örnekte olduğu gibi kullanabilirsiniz.

— galip
kaynak

2

Tam da ihtiyacım olan buydu. Teşekkürler.

— chapman84

23

En kolay yol val(value)işlevdir:

$('select').val(2);

Ve seçilen değeri elde etmek için hiçbir argüman vermezsiniz:

$('select').val();

Ayrıca, eğer varsa <option value="valueToSelect">...</option>, şunları yapabilirsiniz:

$('select').val("valueToSelect");

DEMO

— Ionică Bizău
kaynak

Ayrıca $ ('# SelectCtrlId') çalıştı. Val ('ValueToSelect');

— Sai

9

Belirli bir değere sahip bir seçenek seçmek istiyorsanız aşağıdaki kodu kullanın:

$('select>option[value="' + value + '"]').prop('selected', true);

— nlareu
kaynak

$ ( 'seçeneğini') val (değer).; Neden bu ciddiyet? ;)

— Zeeshan

1

@Zee Yanıtlanan kod birden fazla seçime de izin verir.

— Azghanvi

5

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

— Mamun Rasid
kaynak

3

Beynimde biraz daha kolay olan 0 tabanlı yerine 1 tabanlı indeksleme kullandığından nth-child () 'i eq ()' ye tercih ederim.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

— Lee D
kaynak

"1 tabanlı dizin", tarihleri olan şeyleri işlerken daha iyidir. Beni bir çok sıkıntıdan kurtarıyor. Teşekkürler.

— TCB13

3

'' Öğesi ile genellikle 'value' özelliğini kullanırız. Ayarlamayı kolaylaştırır:

$('select').val('option-value');

— Savaratkar
kaynak

3

Bunu dene:

$('#mySelectElement option')[0].selected = true;

Saygılarımızla!

— Nicolas Finelli
kaynak

2

kimliği ile cevap:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— Javad Masoumi
kaynak

1

 $('select>option:eq(3)').attr('selected', 'selected');

Burada dikkat edilmesi gereken bir nokta, select / option'ın change olayı için javascript izlemeniz varsa .trigger('change'), kodun eklenmesi için eklemeniz gerekir .

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

çünkü sadece çağrı .attr('selected', 'selected')olayı tetiklemez

— kanitw
kaynak