200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html select不能修改 更改HTML Select元素的选定选项

html select不能修改 更改HTML Select元素的选定选项

时间:2022-06-06 19:12:35

相关推荐

html select不能修改 更改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 = 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;

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。