Mengubah opsi yang dipilih dari elemen Pilih HTML

Dalam HTML saya, saya punya <select>dengan tiga <option>elemen. Saya ingin menggunakan jQuery untuk memeriksa nilai setiap opsi terhadap Javascript var. Jika ada yang cocok, saya ingin mengatur atribut yang dipilih dari opsi itu. Bagaimana saya melakukannya?

JavaScript vanila

Menggunakan JavaScript lama biasa:

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

Tetapi jika Anda benar - benar ingin menggunakan jQuery:

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 - Menggunakan Nilai Atribut

Jika opsi Anda memiliki atribut nilai yang berbeda dari konten teksnya dan Anda ingin memilih melalui konten teks:

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

Demo

Tetapi jika Anda memiliki pengaturan di atas dan ingin memilih berdasarkan nilai menggunakan jQuery, Anda dapat melakukan seperti sebelumnya:

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

DOM modern

Untuk browser yang mendukung document.querySelectordan HTMLOptionElement::selectedproperti, ini adalah cara yang lebih ringkas untuk menyelesaikan tugas ini:

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

Demo

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>

Demo

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>

Demo

Sudut 2

Catatan: ini belum diperbarui untuk rilis stabil final.

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

Demo

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>

Demo

Tidak ada satu pun contoh menggunakan jquery di sini yang benar karena mereka akan membiarkan pilih menampilkan entri pertama meskipun nilainya telah diubah.

Cara yang tepat untuk memilih Alaska dan memiliki pilih menunjukkan item yang tepat seperti yang dipilih menggunakan:

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

Dengan jquery akan menjadi:

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

Anda dapat mengubah nilai elemen pilih, yang mengubah opsi yang dipilih ke nilai dengan nilai itu, menggunakan JavaScript:

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

DEMO

Markup

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

Demo

Saya ingin mengubah nilai pilih elemen yang dipilih & textContent (apa yang kita lihat) menjadi 'Mangga'.

Kode paling sederhana yang berfungsi adalah di bawah ini:

var newValue1 = 'Mango'

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

Semoga itu bisa membantu seseorang. Semoga berhasil.
Pilih jika ini membantu Anda.

Uji Demo ini

1. Memilih Opsi berdasarkan nilainya

   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. Memilih Opsi berdasarkan teksnya

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

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

Jawaban luar biasa - inilah versi D3 untuk siapa pun yang mencari:

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

Saya menggunakan hampir semua jawaban yang diposting di sini tetapi tidak nyaman dengan itu jadi saya menggali satu langkah lebih lanjut dan menemukan solusi mudah yang sesuai dengan kebutuhan saya dan merasa layak untuk dibagikan dengan kalian.
Alih-alih iterasi di seluruh opsi atau menggunakan JQuery yang dapat Anda lakukan menggunakan inti JS dalam langkah-langkah sederhana:

Contoh

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

Jadi, Anda harus tahu nilai opsi untuk memilih.

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

Cara Penggunaan?

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

Komentar Anda diterima. :) AzmatHunzai.

Setelah banyak pencarian saya mencoba @kzh pada daftar pilih di mana saya hanya tahu optionteks dalam bukan valueatribut, kode ini berdasarkan jawaban pilih saya menggunakannya untuk mengubah opsi pilih sesuai dengan halaman saat urlini pada format ini 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>

Ini akan membuat urlparameter ditampilkan sebagai dipilih untuk membuatnya lebih ramah pengguna dan pengunjung tahu halaman atau profil apa yang sedang dilihatnya.

Saya menggunakan ini setelah memperbarui register dan mengubah status permintaan melalui ajax, kemudian saya melakukan kueri dengan status baru di skrip yang sama dan memasukkannya ke elemen tag pilih status baru untuk memperbarui tampilan.

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

Saya harap ini bermanfaat.

Versi Vanilla sedikit lebih rapi. Anggap Anda sudah memperbaiki yang nodeListhilang .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Hanya:

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

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