html设置菜单的元素,更改HTML Select元素的选定选项

香草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 = ng.Component({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;

}

});