javascript - 更改HTML Select元素的选定选项(Changing the selected option of an HTML Select element)

Question

In my HTML, I have a <select> with three <option> elements.

(在我的HTML中，我有一个带有三个<option>元素的<select> 。)

I want to use jQuery to check each option's value against a Javascript var .

(我想使用jQuery来检查每个选项的值对Javascript var 。)

If one matches, I want to set the selected attribute of that option.

(如果匹配，我想设置该选项的选定属性。)

How would I do that?

(我该怎么办？)

  ask by llihttocs translate from so

Answer 1

Vanilla JavaScript(香草JavaScript)

Using plain old JavaScript:

(使用普通的旧JavaScript：)

 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(jQuery的)

But if you really want to use jQuery:

(但是如果你真的想使用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 - Using Value Attributes(jQuery - 使用值属性)

In case your options have value attributes which differ from their text content and you want to select via text content:

(如果您的选项具有与其文本内容不同的值属性，并且您希望通过文本内容进行选择：)

<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(演示)

But if you do have the above set up and want to select by value using jQuery, you can do as before:

(但是如果你确实有上面的设置，并希望使用jQuery按值选择，你可以像以前一样：)

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

Modern DOM(现代DOM)

For the browsers that support document.querySelector and the HTMLOptionElement::selected property, this is a more succinct way of accomplishing this task:

(对于支持document.querySelector和HTMLOptionElement::selected属性的浏览器，这是完成此任务的更简洁方法：)

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

Demo(演示)

Knockout.js(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(演示)

Polymer(聚合物)

<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(演示)

Angular 2(Angular 2)

Note: this has not been updated for the final stable release.

(注意：最终稳定版本尚未更新。)

<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(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(演示)