JavaScript kullanarak bir seçim kutusu öğesinin değerini programlı olarak nasıl ayarlarım?

Eğer jQuery kullanıyorsanız bunu da yapabilirsiniz:

$('#leaveCode').val('14');

Bu, 14 değeri olan <option> öğesini seçecektir.

Düz Javascript ile, bu iki Documentyöntemleri ile de elde edilebilir.

• document.querySelector ile bir CSS seçicisine göre bir öğe seçebilirsiniz:

  document.querySelector('#leaveCode').value = '14'
  

• Daha yerleşik bir yaklaşımı document.getElementById() ile kullanmak, işlev isminden de anlaşılacağı üzere idişlevine göre bir eleman seçmenizi sağlar:

  document.getElementById('leaveCode').value = '14'
  

Bu yöntemleri ve jQuery işlevini çalışırken görmek için aşağıdaki kodu çalıştırabilirsiniz:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Soruyu yanıtlamıyor, ancak seçmek istediğiniz öğenin dizini olduğu indeks ile de seçebilirsiniz:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

Döngü ile görüntüleme değerine göre seçmek için öğeler arasında döngü de yapabilirsiniz:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Farklı yöntemleri karşılaştırdım:

JS veya jQuery ile bir seçimin değerini nasıl ayarlayacağınızla ilgili farklı yöntemlerin karşılaştırılması

kod:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);


});

~ 4000 element ile seçimden çıktı alın:

1 ms

58 ms

612 ms

Firefox 10 ile. Not: Bu testi yapmamın tek nedeni, jQuery'nin ~ 2000 girişiyle listemizde süper performans göstermesiydi (seçenekler arasında daha uzun metinler vardı). Bir val () 'den sonra yaklaşık 2 saniye geciktik.

Ayrıca not: Metin değerine değil gerçek değere bağlı olarak değer ayarlıyorum.

document.getElementById('leaveCode').value = '10';

Bu, seçimi "Yıllık İzin" olarak ayarlamalıdır.

Yukarıdaki JavaScript/jQuery tabanlı çözümleri, örneğin denedim:

$("#leaveCode").val("14");

ve

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

angularJS uygulamasında, bir gerekli <select> öğesinin bulunduğu yer.

Hiçbiri işe yaramıyor, çünkü AngularJS form onayı ateşlenmiyor. Doğru seçenek seçilse de (ve formda görüntülense de) giriş geçersiz kaldı ( ng-pristine ve ng-geçersiz sınıflar hala mevcut).

AngularJS onayını zorlamak için, bir seçenek seçtikten sonra jQuery change () arayın:

$("#leaveCode").val("14").change();

ve

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

Gerekirse en kolay yol:
1) Seçme seçeneğini tanımlayan bir düğmeye tıklayın
2) Seçim seçeneğinin olduğu başka bir sayfaya gidin
3) Bu seçenek değerinin başka bir sayfada seçilmesini sağlayın

1) düğme bağlantılarınız (örneğin, ana sayfada)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(burada contact.php, seçeneklerin seçildiği sayfanızdır. URL'sinde sayfa var mı? seçenek = 1 veya 2)

2) bu kodu ikinci sayfanıza koyun (benim durumum contact.php)

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

), tıklanan düğmeye bağlı olarak, seçilen değerin seçilmesini sağlar

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. ve bunun gibi.
Bu, değeri url'deki GET üzerinden başka bir sayfaya (seçenek listesi ile) geçmenin kolay bir yoludur. Form yok, kimlik yok .. sadece 3 adım ve mükemmel çalışıyor.

Bu çizgiler boyunca bir şey olmalı:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}

Formunuzun form1 olarak adlandırıldığını varsayalım:

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

Neden öğenin kimliği için bir değişken eklemiyor ve yeniden kullanılabilir bir işlev yapmıyorsunuz?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

Muhtemelen bunu istiyorsun:

$("._statusDDL").val('2');

OR

$('select').prop('selectedIndex', 3);