更改HTML Select元素的选定选项 [英] Changing the selected option of an HTML Select element
问题描述
在我的HTML中，我有一个带有三个< option> 元素的< select> 。我想使用jQuery来检查每个选项的值对应的Javascript var 。如果一个匹配，我想设置该选项的选定属性。我将如何做到这一点？
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;打破; }}}
< select id =sel> ; <选项>目录< /选项> <选项>狗和LT; /选项> < / option> Fish< / option>< / select>< button id =btn> Select Fish< / button>
jQuery
但是，如果您真的想使用jQuery：
var val ='Fish'; $（'＃btn'）。on（'click'，function（）{
$（'＃sel'）。val（val）;
}）;
<$ c'c> var val ='Fish'; $（'＃btn'）。on（'click'，function（）{$（'＃sel'）。val（val）;}）; < script src =https://ajax.googleapis.com/ajax $ b jQuery - 使用值属性
如果您的选项具有与其文本内容不同的值属性并且您希望通过文本内容进行选择：
< select id =sel>
< option value =1> Cat< / option>
< option value =2>狗< /选项>
< option value =3> Fish< / option>
< / select>
< script>
var val ='鱼';
$（'＃sel option：contains（'+ val +'）'）。prop（{selected：true}）;
< / script>
Demo
但是，如果您确实已经设置了上述设置并希望使用jQuery按值进行选择，您可以像以前一样进行操作：
var val = 3;
$（'＃sel'）。val（val）;
现代DOM
对于浏览器支持 document.querySelector 和 HTMLOptionElement :: selected 属性，这是完成此任务的更简洁的方式：
var val = 3;
document.querySelector（'＃sel [value =''+ val +']'）。selected = true;
演示
Knockout.js a>
< select data-bind =value：val>
< option value =1> Cat< / option>
< option value =2>狗< /选项>
< option value =3> Fish< / option>
< / select>
< script>
var viewModel = {
val：ko.observable（）
};
ko.applyBindings（viewModel）;
viewModel.val（3）;
< / script>
Demo
聚合物 a>
< template id =templateis =dom-bind>
< select value ={{val}}>
< option value =1> Cat< / option>
< option value =2>狗< /选项>
< option value =3> Fish< / option>
< / select>
< / template>
< script>
template.val = 3;
< / script>
演示
Angular 2
注意：最终的稳定版本尚未更新。
< app id =app>
< select [value] =val>
< option value =1> Cat< / option>
< option value =2>狗< /选项>
< 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>
演示
Vue 2
< div id =app>
< select v-model =val>
< option value =1> Cat< / option>
< option value =2>狗< /选项>
< option value =3> Fish< / option>
< / select>
< / div>
< script>
var app = new Vue（{
el：'#app'，
data：{
val：null，
}，
mounted：function （）{
this.val = 3;
}
}）;
< / script>
演示
In my HTML, I have a <select> with three <option> elements. I want to use jQuery to check each option's value against a Javascript var. If one matches, I want to set the selected attribute of that option. How would I do that?
解决方案 Vanilla JavaScript
Using plain old 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
But if you really want to use 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
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:
var val = 3;
$('#sel').val(val);
Modern DOM
For the browsers that support document.querySelector and the HTMLOptionElement::selected property, this is a more succinct way of accomplishing this task:
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
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
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
<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
这篇关于更改HTML Select元素的选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
