香草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;
}
}
}
Cat
Dog
Fish
Select Fish
jQuery的
但是,如果您真的想使用jQuery:
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
Cat
Dog
Fish
Select Fish
jQuery-使用值属性
如果您的选项具有与文本内容不同的值属性,并且您希望通过文本内容进行选择:
Cat
Dog
Fish
var val = 'Fish';
$('#sel option:contains(' + val + ')').prop({selected: true});
但是,如果您确实进行了上述设置,并希望使用jQuery按值进行选择,则可以像以前一样进行操作:
var val = 3;
$('#sel').val(val);
现代DOM
对于支持document.querySelector和HTMLOptionElement::selected属性的浏览器,这是完成此任务的更简洁的方法:
var val = 3;
document.querySelector('#sel [value="' + val + '"]').selected = true;
Knockout.js
Cat
Dog
Fish
var viewModel = {
val: ko.observable()
};
ko.applyBindings(viewModel);
viewModel.val(3);
Cat
Dog
Fish
template.val = 3;
注意:最终稳定版本尚未更新。
Cat
Dog
Fish
var App = ponent({selector: 'app'})
.View({template: app.innerHTML})
.Class({constructor: function() {}});
ng.bootstrap(App).then(function(app) {
app._hostComponent.instance.val = 3;
});
Vue 2
Cat
Dog
Fish
var app = new Vue({
el: '#app',
data: {
val: null,
},
mounted: function() {
this.val = 3;
}
});