Bir seçim kutum var:

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

Seçeneklerden birini, seçili dizine göre "seçili" olarak ayarlamak istiyorum.

Örneğin, "Sayı 3" ayarlamaya çalışıyorsanız, bunu deniyorum:

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

Ama bu işe yaramıyor. Bir seçeneği jQuery kullanarak dizinine göre seçildiği gibi nasıl ayarlayabilirim?

Teşekkürler!

NOT : cevap jQuery 1.6.1+ sürümüne bağlıdır

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

Yorum için teşekkürler .get, jQuery değil bir DOM öğesi döndürdüğü için çalışmaz. .eqİsterseniz , işlevin seçicinin dışında da kullanılabileceğini unutmayın .

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

Değeri kullanmak istiyorsanız , belirli bir dizini seçmek yerine daha kısa / okunaklı olabilirsiniz :

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

Not: .val(3) Bu örnek için de çalışır, ancak sayısal olmayan değerler dizeleri olmalıdır, bu yüzden tutarlılık için bir dize seçtim.
(örneğin <option value="hello">Number3</option>, kullanmanızı gerektirir .val("hello"))

Bu da yararlı olabilir, bu yüzden buraya ekleyeceğimi düşündüm.

Bir öğenin dizinine değil, öğenin değerine göre bir değer seçmek isterseniz, aşağıdakileri yapabilirsiniz:

Seçim listeniz:

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

Seçilen öğe şimdi "2 Numara" olacaktır.

Bunun yerine şunu deneyin:

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

Daha da basit:

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

seçim yapmak için en iyi yollarla seçim yapmak istediğinizde,
$('#select option').removeAttr('selected');önceki seçimleri kaldırmak için kullanabilirsiniz .

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

Anlaşılması gereken şey val(), bir selectöğe için seçilen seçeneğin değerini döndürmesidir, ancak selectedIndexjavascript'teki gibi öğe sayısını döndürmez .

Seçeneği seçmek için value="7"aşağıdakileri kullanabilirsiniz:

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

Seçeneğin seçimini kaldırmak için boş bir dizi kullanın:

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

Ve elbette birden fazla seçenek seçebilirsiniz *:

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

* Bununla birlikte, birden çok seçenek seçmek için öğenizin <select>bir MULTIPLEniteliği olmalıdır , aksi takdirde çalışmaz.

Her zaman prop ile ilgili sorunlar yaşadım ('seçildi'), aşağıdakiler her zaman benim için çalıştı:

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

Bunu dene:

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

Sonunda, bir .change olayını tetikleyin:

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

Umarım bu çok yardımcı olabilir

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

3. seçeneği seç

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

Jsfiddle örneği

NB:

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

yanlışsa, dizi deference size jquery nesnesi değil, dom nesnesini alır, bu nedenle bir TypeError ile başarısız olur, örneğin FF'de: "$ ('# selectBox seçeneği') [3] .attr () bir işlev değil ."

Marc ve John Kugelman'ın cevaplarını netleştirmek için şunları kullanabilirsiniz:

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

get() jQuery nesnesini değil DOM nesnesini aldığından belirtilen şekilde kullanılırsa çalışmaz, bu nedenle aşağıdaki çözüm çalışmaz:

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

eq()jQuery kümesini belirtilen dizine sahip öğenin filtrelerine alır. Daha net $($('#selectBox option').get(3)). Hepsi bu kadar verimli değil. $($('#selectBox option')[3])daha verimlidir ( test durumuna bakın ).

Aslında jQuery nesnesine ihtiyacınız yok. Bu hile yapacak:

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

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

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

Bir diğer hayati önem taşıyan nokta:

"Seçilen" özelliği, seçilen bir radyo düğmesini (en azından Firefox ve Chrome'da) belirleme şekliniz değildir. "İşaretli" özelliğini kullanın:

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

Aynı şey onay kutuları için de geçerlidir.

1.4.4'te bir hata alıyorsunuz: $ ("# selectBox seçeneği") [3] .attr bir işlev değil

Bu çalışıyor: $('#name option:eq(idx)').attr('selected', true);

Burada #nameselect kimliği ve idxseçilmesini istediğiniz seçenek değeridir.

Saf javascript selectedIndex niteliği, saf JavaScript var ve çapraz tarayıcı çalıştığı için gitmek doğru yoludur:

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

İşte diğerini ayarlamak için birini kullanarak iki açılan ile bir jsfiddle demo :

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

İstediğiniz şey, seçenek etiketindeki "seçili" öznitelik ise ( işte keman budur )

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

Çalıştırmak için genellikle tetikleyici ('değişiklik') kullanıyorum

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

İd select = selectA1 ve position_index = 0 kimliğine sahip örnek (select içindeki frist seçeneği):

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

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

Yukarıdakileri kullanırken webkit'te (Chrome) hatalar almaya devam ettim:

"Yakalanmayan TypeError: # nesnesinin 'attr' yöntemi yok"

Bu sözdizimi bu hataları durdurur.

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

Bunu yaparak öğeyi seçim listesindeki değere göre seçin (özellikle seçenek değerlerinde boşluk veya garip bir karakter varsa):

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

Ayrıca, (çoklu seçimin aksine) bir açılır listeniz varsa, break;üzerine yazılması gereken ilk değerin bulunmaması için bunu yapmak isteyebilirsiniz .

Js dosyasında sabit kodlanmış değerleri olmayan bir çözüme ihtiyacım var; kullanarak selectedIndex. Verilen çözümlerin çoğu bir tarayıcıda başarısız oldu. Bu, FF10 ve IE8'de çalışıyor gibi görünüyor (başka biri diğer sürümlerde test edebilir)

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

Bir öğenin belirli bir özelliğini temel alan bir öğe seçmek istiyorsanız, [prop = val] türündeki jQuery seçeneği bu öğeyi alır. Şimdi endeksi umursamıyorum sadece değerine göre öğeyi istedim.

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

Aynı sorunla karşılaştım. İlk önce olaylardan geçmeniz gerekir (yani ilk önce hangi olay gerçekleşiyor).

Örneğin:

İlk etkinlik seçenekleri ile select box oluşturuyor.

İkinci olay böyle val gibi herhangi işlevini kullanarak varsayılan seçeneği () vb seçmektir

Sen emin olmalıdır İkinci olay sonrasında gerçekleşmesi gerekir İlk olay .

Bunu başarmak için iki işlev almamıza izin verelim, createSelectbox () (seçim kutusu oluşturmak için) ve selectDefaultOption ()

Bunu sağlamak için gereken selectDefaultOption () sadece yürütülmesinden sonra çağrılmalıdır ) (generateSelectbox

Seçim kutunuz bir multipl ise birden çok değer başlatabilirsiniz:

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

seçim değişkeni değerini dinamik olarak ayarlayabileceğiniz gibi, seçenek de seçilebilir. Aşağıdaki kodu deneyebilirsiniz

kod:

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

});

HTML KODU:

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

kısaca:

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

burada dizin, tamsayı olarak seçilen dizindir.