it-swarm-tr.com

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

Aşağıdaki HTML <select> elemanına sahibim:

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

Parametre olarak leaveCode numarası ile bir JavaScript işlevini kullanarak, listede uygun seçeneği nasıl seçerim?

343
brasskazoo
SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}
438
Mitchel Sellers

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>
98
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

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;
14
Chase Seibert

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.

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

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

9
William

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

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

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.

3
Lana

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;
}
1
Stephen Wrighton

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

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

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;
}
1
Robert Swisher

Muhtemelen bunu istiyorsun:

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

OR

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