香草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-使用值屬性

如果您的選項(xiàng)具有與文本內(nèi)容不同的值屬性，并且您希望通過文本內(nèi)容進(jìn)行選擇：

Cat

Dog

Fish

var val = 'Fish';

$('#sel option:contains(' + val + ')').prop({selected: true});

但是，如果您確實(shí)進(jìn)行了上述設(shè)置，并希望使用jQuery按值進(jìn)行選擇，則可以像以前一樣進(jìn)行操作：

var val = 3;

$('#sel').val(val);

現(xiàn)代DOM

對(duì)于支持document.querySelector和HTMLOptionElement::selected屬性的瀏覽器，這是完成此任務(wù)的更簡(jiǎn)潔的方法：

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;

注意：最終穩(wěn)定版本尚未更新。

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;

}

});

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html select不能修改,更改HTML Select元素的选定选项的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。