Soru Bir HTML Seçme öğesinin seçili seçeneğinin değiştirilmesi


HTML’mde bir <select> üç ile <option> elementler. Her seçeneğin bir Javascript'e karşı değerini kontrol etmek için jQuery'yi kullanmak istiyorum var. Biriyle eşleşirse, o seçeneğin seçili özelliğini ayarlamak istiyorum. Bunu nasıl yaparım?


100
2017-09-10 16:32


Menşei


HTML'nizi gönderin. Ama her zamanki gibi: $('#myselectid').val() - Samich
Neden reddedildiğinden emin değil, yeni bir kullanıcı ve soru yasal görünüyor. - vol7ron


Cevaplar:


Vanilya JavaScript

Düz eski JavaScript'i kullanma:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery

Ama eğer sen Gerçekten mi jQuery'yi kullanmak istiyorum:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery - Değer Özelliklerini Kullanma

Seçenekleriniz metin içeriğinden farklı olan ve metin içeriği ile seçmek istediğiniz değer niteliklerine sahipse:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

gösteri

Ancak yukarıdaki ayarlara sahipseniz ve jQuery'yi kullanarak değer seçmek istiyorsanız, aşağıdaki gibi yapabilirsiniz:

var val = 3;
$('#sel').val(val);

Modern DOM

Destekleyen tarayıcılar için document.querySelector ve HTMLOptionElement::selected Özellik, bu görevi gerçekleştirmenin daha özlü bir yoludur:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

gösteri

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

gösteri

Polimer

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

gösteri

Açısal 2

Not: Bu son kararlı sürüm için güncellenmemiştir.

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

gösteri

Vue 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

gösteri


238
2017-09-10 16:43



Bu özellikle kullanışlıdır, çünkü seçilen özniteliğin nasıl ayarlanacağından emin değildim. Bir selectedIndex olduğunu anlamadım. Teşekkürler. - llihttocs
@llihttocs kabul etmek için yeterli mi? : - / - kzh
@aelgoa jsperf.com/option-select-loop/2 Kodumu daha fazla taklit etmek için ilk snippet'ini düzelttim, bu da benimkini yavaşlatıyor. Ön artırma yerine art artırma kullandım ve daha sonra 3. testinizden biraz daha hızlı bir test daha ekledim. - kzh
sadist için: document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true; - kzh
@llihttocs Şimdi ne var? - kzh


Burada jquery kullanan örneklerin hiçbiri, değer değişmiş olsa bile, ilk girişi görüntüleyen seçimden çıkacaklarından doğru değildir.

Alaska'yı seçip seçmek için doğru yol, aşağıdakileri kullanarak seçili olan doğru öğeyi gösterir:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

Jquery ile olurdu:

$('#state').val('AK').change();

18
2018-01-28 23:22





Biçimlendirme

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

gösteri


6
2017-09-10 16:38



Bence tam da ihtiyacım olan şey bu. Kodunuzun birkaç satırını zaten kullandım ve işe yarıyor gibi görünüyor. Büyük snippet'ler için teşekkürler. - llihttocs
@llihttocs: Yardım ettim sevindim. Cevabın sol üst tarafındaki oy sayısının altındaki boş tıklamayı tıklayarak sorununuzu çözen cevabı kabul etmekte özgürsünüz. Böylece bu soru çözülmüş olarak işaretlenir ve aynı çözümü arayacak olan diğerleri cevabı kolayca bulacaktır. - Shef


Bu Demoyu test et

  1. Seçeneğini seçerek değer

    var vals = [2,'c'];
    
    $('option').each(function(){
       var $t = $(this);
    
       for (var n=vals.length; n--; )
          if ($t.val() == vals[n]){
             $t.prop('selected', true);
             return;
          }
    });
    
  2. Seçeneğini seçerek Metin

    var vals = ['Two','CCC'];                   // what we're looking for is different
    
    $('option').each(function(){
       var $t = $(this);
    
       for (var n=vals.length; n--; )
          if ($t.text() == vals[n]){            // method used is different
             $t.prop('selected', true);
             return;
          }
    });
    

HTML desteği

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

2
2017-09-10 16:53



Bu örnek çok kullanışlıdır. Seçenekler arasında nasıl yinelendiğinden ve seçili özniteliğin nasıl ayarlanacağından emin değildim. Tam bir cevap için teşekkür ederim. - llihttocs
Sorun yok llihttocs, yardımcı bulduğunuz sorular / yorumlar'ın yanındaki yukarı oku tıkladığınızdan emin olun. Ve seçtiğiniz cevabın yanındaki onay işaretini seçin. - ya sana bir şey yapamazsın - vol7ron


JavaScript'i kullanarak seçilen seçeneği seçilen değere değiştiren select öğesinin değerini değiştirebilirsiniz:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

DEMO


2
2017-09-02 09:19



Örneğiniz zamanlama nedeniyle pek işe yaramıyor. Kullanıcı bir düğmeyi tıklayana kadar beklemek için güncelledim: jsfiddle.net/xkqTR/3271 - dlaliberte


Mükemmel cevaplar - İşte arayan herkes için D3 sürümü:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

1
2017-08-17 18:49



Harika örnek! Bunu büyüyen listeme ekleyeceğim. - kzh


Seçme öğesinin seçili seçeneğinin 'Mango'ya hem değeri hem de textContent (gördüklerimizi) değiştirmek istiyorum.

Çalışılan en basit kod aşağıdadır:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

Umarım birisine yardım eder. İyi şanslar.
Bu sana yardım etse oy ver.


1
2017-09-11 13:26





Burada yayınlanan cevapların neredeyse tamamını kullandım ama bu konuda rahat olmadım, bu yüzden bir adım atmaya başladım ve ihtiyacım olan ve sizlerle paylaşmaya değer hissettiren kolay bir çözüm buldum.
Seçeneklerin her yerine tekrarlamak veya kullanmak JQuery çekirdek kullanarak yapabilirsin JS basit adımlarla:

Örnek

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

Bu yüzden seçme seçeneğinin değerini bilmelisiniz.

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

Nasıl kullanılır?

selectOrganization(25); //this will select SONY from option List

Yorumlarınız kabul edilir. :) AzmatHunzai.


1
2018-03-05 09:23





Bunu bir kayıt güncelledikten sonra kullandım ve istek durumunu ajax ile değiştirdim, daha sonra aynı komut dosyasında yeni durum ile bir sorgu yapıyorum ve görünümü güncelleştirmek için select etiket elemanının yeni durumuna yerleştirdim.

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

Ben bunun yararlı olucağını umuyorum.


0
2017-10-25 21:01





Çok fazla arama yaptıktan sonra sadece bildiğim bir listeden @kzh denedim. option iç metin değil value öznitelik, bu koda göre seçili cevaba göre mevcut seçime göre seçim seçeneğini değiştirmek için kullandım urlbu formatta http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

Bu devam edecek url Daha kullanıcı dostu hale getirmek için seçilen parametreler gösterilir ve ziyaretçi şu anda hangi sayfayı veya profili görüntülediğini bilir.


0
2018-06-01 02:37