Bir HTML Seç öğesinin seçilen seçeneğini değiştirme

HTML'imde <select>üç <option>elementli bir tane var. Bir Javascript karşı her seçeneğin değerini denetlemek için jQuery kullanmak istiyorum var. Biri eşleşirse, bu seçeneğin seçilen niteliğini ayarlamak istiyorum. Bunu nasıl yaparım?

Vanilya JavaScript

Sade eski JavaScript 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 gerçekten jQuery kullanmak istiyorsanız:

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çeneklerinizin metin içeriklerinden farklı değer özelliklerine sahip olması ve metin içeriği üzerinden seçmek istiyorsanız:

<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 kurulumu yaptıysanız ve jQuery kullanarak değere göre seçmek istiyorsanız, daha önce yaptığınız gibi yapabilirsiniz:

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

Modern DOM

Desteği document.querySelectorve HTMLOptionElement::selectedözelliği destekleyen tarayıcılar için bu, bu görevi yerine getirmenin 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

Burada jquery kullanan örneklerin hiçbiri gerçekte doğru değildir, çünkü değer değiştirilse bile ilk girdiyi gösteren seçimi terk ederler.

Alaska'yı seçmenin ve seçilenin doğru öğeyi seçildiği gibi göstermesini sağlamanın doğru yolu:

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

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

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

DEMO

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

Seçme öğesinin seçilen seçeneğinin değeri & textContent (gördüğümüz) 'Mango' olarak değiştirmek istiyorum.

Çalışan 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 birine yardım eder. İyi şanslar.
Bu size yardımcı olduysa, oy verin.

Bu Demoyu Test Et

1. Onun dayalı Seçeneği Belirleme değeri

   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. Onun dayalı Seçeneği Belirleme 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;
         }
   });

Destekleyici HTML

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

Mükemmel cevaplar - işte bakan 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>

Burada yayınlanan hemen hemen tüm cevapları kullandım ama bununla rahat değilim, bu yüzden bir adım daha fazla kazıyorum ve ihtiyacıma uyan kolay bir çözüm buldum ve sizinle paylaşmaya değer hissediyorum.
Tüm seçeneklerde yineleme veya JQuery kullanarak basit adımlarla core JS'yi kullanabilirsiniz :

Misal

<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 nedenle, seçim 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 açıktır. :) AzmatHunzai.

Sadece biliyorum Seçim listesindeki @kzh denedik arama bir sürü sonra optioniç metin değil valueniteliği, bu kod seçme yanıta göre ben şimdiki sayfaya göre seçme seçeneği değiştirmek için kullandı urlbu formata 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, urlseçili olarak gösterilen parametreleri daha kullanıcı dostu hale getirir ve ziyaretçi hangi sayfayı veya profili görüntülemekte olduğunu bilir.

Ben bir kayıt güncelledikten sonra bu kullanılan ve ajax aracılığıyla istek durumunu değiştirdi, sonra ben aynı komut dosyası yeni durum ile bir sorgu yapmak ve görünümü güncellemek için select etiketi öğe yeni durumuna koymak.

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

Ben bunun yararlı olucağını umuyorum.

Biraz daha temiz Vanilla.JS versiyonu. Zaten nodeListeksik olanı düzelttiğinizi varsayarsak .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Sadece:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})