Thay đổi tùy chọn đã chọn của phần tử Chọn HTML

Trong HTML của tôi, tôi có <select>ba <option>yếu tố. Tôi muốn sử dụng jQuery để kiểm tra giá trị của từng tùy chọn đối với Javascript var. Nếu khớp, tôi muốn đặt thuộc tính đã chọn của tùy chọn đó. Làm thế nào tôi có thể làm điều đó?

Vani JavaScript

Sử dụng JavaScript cũ đơn giản:

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

Nhưng nếu bạn thực sự muốn sử dụng 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 - Sử dụng các thuộc tính giá trị

Trong trường hợp tùy chọn của bạn có các thuộc tính giá trị khác với nội dung văn bản của chúng và bạn muốn chọn qua nội dung văn bản:

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

Bản giới thiệu

Nhưng nếu bạn đã thiết lập ở trên và muốn chọn theo giá trị bằng jQuery, bạn có thể làm như trước:

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

DOM hiện đại

Đối với các trình duyệt hỗ trợ document.querySelectorvà thuộc HTMLOptionElement::selectedtính, đây là một cách ngắn gọn hơn để hoàn thành nhiệm vụ này:

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

Bản giới thiệu

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>

Bản giới thiệu

Polime

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

Bản giới thiệu

Góc 2

Lưu ý: điều này chưa được cập nhật cho bản phát hành ổn định cuối cùng.

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

Bản giới thiệu

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>

Bản giới thiệu

Không có ví dụ nào sử dụng jquery ở đây thực sự chính xác vì chúng sẽ để lại lựa chọn hiển thị mục nhập đầu tiên mặc dù giá trị đã được thay đổi.

Cách đúng để chọn Alaska và chọn đúng hiển thị mục đúng như đã chọn bằng cách sử dụng:

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

Với jquery sẽ là:

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

Bạn có thể thay đổi giá trị của phần tử chọn, thay đổi tùy chọn đã chọn thành phần tử có giá trị đó, sử dụng JavaScript:

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

BẢN GIỚI THIỆU

Đánh dấu

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

Bản giới thiệu

Tôi muốn thay đổi cả giá trị & textContent của tùy chọn đã chọn của phần tử được chọn thành 'Mango'.

Mã đơn giản nhất đã làm việc dưới đây:

var newValue1 = 'Mango'

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

Hy vọng rằng sẽ giúp được ai đó. May mắn nhất.
Lên bình chọn nếu điều này giúp bạn.

Kiểm tra bản demo này

1. Chọn tùy chọn dựa trên giá trị của nó

   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. Chọn tùy chọn dựa trên văn bản của nó

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

Hỗ trợ 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>

Câu trả lời tuyệt vời - đây là phiên bản D3 cho bất cứ ai tìm kiếm:

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

Tôi đã sử dụng gần như tất cả các câu trả lời được đăng ở đây nhưng không thoải mái với điều đó vì vậy tôi đã đào sâu một bước và tìm ra giải pháp dễ dàng phù hợp với nhu cầu của tôi và cảm thấy đáng để chia sẻ với các bạn.
Thay vì lặp lại trên khắp các tùy chọn hoặc sử dụng JQuery bạn có thể làm bằng lõi JS trong các bước đơn giản sau:

Thí dụ

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

Vì vậy, bạn phải biết giá trị của tùy chọn để chọn.

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

Sử dụng như thế nào?

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

Nhận xét của bạn đều được chào đón. :) AzmatHunzai.

Sau rất nhiều lần tìm kiếm, tôi đã thử @kzh trong danh sách chọn trong đó tôi chỉ biết thuộc tính optionvăn bản bên trong không phải valuethuộc tính, mã này dựa trên câu trả lời chọn Tôi đã sử dụng nó để thay đổi tùy chọn chọn theo trang hiện tại urltrên định dạng này 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>

Điều này sẽ giữ urlcác tham số được hiển thị khi được chọn để làm cho nó thân thiện hơn với người dùng và khách truy cập biết trang nào hoặc hồ sơ anh ta đang xem.

Tôi đã sử dụng điều này sau khi cập nhật một thanh ghi và thay đổi trạng thái yêu cầu thông qua ajax, sau đó tôi thực hiện một truy vấn với trạng thái mới trong cùng một tập lệnh và đặt nó vào trạng thái thẻ chọn phần tử mới để cập nhật chế độ xem.

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

Tôi hy vọng điều này là hữu ích.

Phiên bản Vanilla.JS gọn gàng hơn một chút. Giả sử bạn đã sửa lỗi nodeListbị thiếu .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Chỉ:

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

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