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 = ng.Component({selector: 'app'})

.View({template: app.innerHTML})

.Class({constructor: function() {}});

ng.bootstrap(App).then(function(app) {

app._hostComponent.instance.val = 3;

});

Cat

Dog

Fish

var app = new Vue({

el: '#app',

data: {

val: null,

mounted: function() {

this.val = 3;

}

});

html select不能修改,更改HTML Select元素的选定选项相关推荐

php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
html select样式修改,select标签的默认样式修改
在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通 ...
html单选按钮字体,如何修改radio，input元素默认样式
一.背景介绍下拉列表由select标签实现,单选按钮由表单元素input的type属性radio定义.以下分别是一个简单的下拉列表和单选按钮. 二.知识剖析 1.form元素 form元素定义HTM ...
mysql select语法_MySQL SELECT语法（一）SELECT语法详解
SELECT的语法如下: SELECT[ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [STRAIGHT_JOIN] [SQL_SMALL_RESULT ...
python基础教程：修改Python列表中元素的几种方法
一.在for循环中直接更改列表中元素的值不会起作用: 如: l = list(range(10)[::2]) print (l) for n in l: n = 0 print (l) 运行结果: [ ...
php 改变页面元素,动态更改网页HTML元素(对象)内容_经验交流
动态HTML的出现为用户提供了一种基于传统标准HTML来创建交互式页面的机制.本文主要针对IE 5.0谈谈如何通过其提供的HTML文档对象(DOM)模型使用脚本添加.删除.修改页面中的HTML元素(对 ...
【转】解决mysql 使用 select into或inert into select 批量插入时id使用UUID重复问题
场景: 前段时间在清洗数据时,使用 insert into select 语法做批量新增的时候,设置目标表的主键id为 uuid,使用mysql语法 Replace(uuid(), '-', '') ...
SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...
select count(*) from temp 与select count(1) from temp有什么区别
select count(*) from temp 与select count(1) from temp有什么区别 ----count(*)是整个表中有多少条记录,扫描的是整个表 ---- ----c ...

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

html select不能修改,更改HTML Select元素的选定选项相关推荐

最新文章

热门文章