原生js给select赋值或者vue绑定数据,会自匹配下拉选项的value或者key,从而显示对应的label或者对应的option的html

eg:

原生:

<select name="" id="">
<!-- <option value="1" key='1' label="测试1"></option>
<option value="2" key='2' label="测试2"></option>
<option value="3" key='3' label="测试3"></option>
<option value="4" key='4' label="测试4"></option>
<option value="5" key='5' label="测试5"></option> -->
<option value="1">测试1</option>
<option value="2">测试2</option>
<option value="3">测试3</option>
<option value="4">测试4</option>
<option value="5">测试5</option>
</select>
<button>修改下拉框显示的值</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
document.querySelector('select').value = '3'
}
</script>
 
 
vue绑定数据(此例为element ui):
<el-select v-model="data.productInspectionDialog.qualityStandard" :placeholder="$t('page.style.index.placehoder.qualityStandard')" >
<el-option
v-for="item in options.qualityStandard"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
绑定的值初始化或者修改的时候可以赋值与key或者value相同,自动匹配选项

select 自匹配问题的更多相关文章

  1. jquery 匹配select下拉框与列表框

    今天工作中用到 GrapyCity 的 wijmo ui 控件. 要给系统中所有类型的控件加统一样式 用法 $("input [type='text']").wijtext(); ...

  2. PL/SQL异常获取

    1.no_data SET SERVEROUTPUT ON DECLARE pename EMP.ENAME % TYPE ; BEGIN SELECT ename INTO pename FROM ...

  3. 每天一个percona 工具 --- pt-kill

    主要用途:pt-kill是用来kill MySQL连接的一个工具,在MySQL中因为空闲连接较多导致超过最大连接数,或某个有问题的sql导致mysql负载很高时,需要将其KILL掉来保证服务器正常运行 ...

  4. Android基础知识总结

    四大组件之一活动 活动状态 运行状态:活动处于栈顶 暂停状态:活动不处于栈顶,但仍然可见 停止状态:完全不可见 销毁状态:离开返回栈 生存期 onCreate() onStart():不可见到可见调用 ...

  5. pt-kill使用

    percona-toolkit-2.2.10使用举例 以pt-kill为例 --help,可以看到帮助信息 -------- 运行平稳的数据库,如果遇到CPU狂飙,到80%左右,那一定是开发写的烂SQ ...

  6. Python 2.7_First_try_爬取阳光电影网_20161206

    之前看过用Scrapy 框架建立项目爬取 网页解析时候用的Xpath进行解析的网页元素 这次尝试用select方法匹配元素 1.入口爬取页面 http://www.ygdy8.com/index.ht ...

  7. ServiceStack.OrmLite 学习笔记7-复杂点的使用1

    复杂点的使用1 先看看这2个类 class Customer { public int Id { get; set; } ... } class CustomerAddress { public in ...

  8. python 优雅的使用正则表达式 ~ 2

    使用正则表达式 那些基础的理论也说了不少了现在就开始 实操 ( 不知道为啥特别喜欢这个词... ) 吧 . 上一节课说过 正则表达式也是一门语言 , 他被集成到了python当中 , 并且用 re 模 ...

  9. 最全的ORACLE-SQL笔记

    -- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...

随机推荐

  1. TCL 引用同目录下其他脚本文件--source

    方法一: source [file join [file dirname [info script]] Export_inp_by_loadstep.tcl] 方法二: source [file jo ...

  2. php7 使用dom动态生成xml文档

    <?php $dom = new DomDocument('1.0','gb2312'); //创建DOM对象 $store = $dom->createElement('store'); ...

  3. 【java】之位运算^,&,<<,>>,<<<,>>>总结

    1.^(亦或运算) ,针对二进制,相同的为0,不同的为1 public static void main(String[] args) { System.out.println("2^3运算 ...

  4. mysql原生分页

    select * from table limit (pageNo-1)*pageSize, pageSize; 一:分页需求: 客户端通过传递start(页码),limit(每页显示的条数)两个参数 ...

  5. C# Directory.Exists() 文件存在但返回一直为false

    备注:这是一个低级错误,起始真正的原因不是访问权限的问题. 真正的原因是:这个程序要读取远程电脑上共享文件夹里的文件,但是没有远程访问代码,导致找不到相关的目录.所以才报错! 查询一个文件,但程序突然 ...

  6. Nginx访问控制

    1.访问控制 涉及模块:ngx_http_access_module 模块概述:允许限制某些 IP 地址的客户端访问. 对应指令: allow 语法: allow address | CIDR | u ...

  7. mysql通过now()获取的时间不对

    先用now()获取系统时间,发现时间不对(差8个小时): mysql> select now(); +---------------------+ | now() | +------------ ...

  8. linux 安装中文支持

    下载  fonts-chinese-3.02-12.el5.noarch.rpm fonts-ISO8859-2-75dpi-1.0-17.1.noarch.rpm 安装各种提示的依赖 安装 chkf ...

  9. CTO 技能图谱

    岗位职责 建立技术团队文化 规划技术发展路线 落地产品研发成果 宣传公司技术品牌 吸引优秀技术人才 基本素质 正直诚实的道德修养 谦虚谨慎的工作态度 随机应变的处事风格 统领全局的战略思维 硬技能 技 ...

  10. SSD 的介绍 -------转载

    本文转载自: http://www.sohu.com/a/258190629_494938   背景 SSD(Solid-State Drive)是目前正处于鼎盛时期的存储设备.相较于传统的硬盘存储器 ...