vue操作select获取option值
如何实时的获取你选中的值 只用@change件事
@change="changeProduct($event)" 动态传递参数
vue操作select获取option的ID值
如果select的v-model(value)与option绑定的value值一致。
那么就会显示option中的值 {{item.title}}-->
<div id="app">
<select class="fl" v-model="ProductActive" @change="changeProduct($event)" >
<option v-for="(item,index) in productList" :key="index" :value='item.id'>{{item.title}}</option>
</select>
</div>
data:{
productList:[{id:1,title:"北京"},{id:2,title:"上海"},{id:3,title:"广州"},{id:4,title:"四川"}],
ProductActive:"1",//获取被选中的value值 默认选中的是1(北京)
}, methods: {
changeProduct(event) {
this.ProductActive = event.target.value; //获取option对应的value值
console.log("你选中了",this.ProductActive)
},
}
vue操作select获取option值的更多相关文章
- JS实现选择不同select标签option值的验证
js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...
- js 操作select和option
js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...
- Js操作Select大全(取值、设置选中)
Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
- Js操作Select大全(取值、设置选中等等)
jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...
- js如何获取到select的option值???
1.获得选项option的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIn ...
- select 获取option中其他的属性的值
<select name="tag_keys[]" id="category_type" required> <option value=&q ...
- 获取select的option值
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js 操作select和option常用代码整理
1.获取选中select的value和text,html代码如下: <select id="mySelect"> <option value="1&qu ...
随机推荐
- SQL Server有意思的数据类型隐式转换问题
写这篇文章的时候,还真不知道如何取名,也不知道这个该如何将其归类.这个是同事遇到的一个案例,案例比较复杂,这里抽丝剥茧,仅仅构造一个简单的案例来展现一下这个问题.我们先构造测试数据,如下所示: CRE ...
- 成功安装SQL Server实例后 无法找到SQL Server Configuration Manager工具的解决方案
有一次成功安装SQL Server实例后 ,但是在所有程序中无法找到SQL Server Configuration Manager工具,以下步骤是我们当时的解决方案.最后成功将这个工具的转移到了桌面 ...
- postman---postman导出python脚本
前面一直写关于postman的一些文章,大家现在都应该简单了解,其实postman还有许多的功能,这个要大家一点点的挖掘出来了,安静在给大家分享一个关于postman导出python脚本 Postma ...
- Java学习笔记(6)---正则表达式,方法
1.正则表达式: a.定义: 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. 在Java,一个字符串其实就是一 ...
- eNSP仿真软件之利用三层交换机实现VLAN间路由
1.实验原理: VLAN将一个物理的LAN在逻辑上划分成多个广播域.VLAN内的主机间可以直接通信,而VLAN间不能直接互通. 在现实网络中,经常会遇到需要跨VLAN相互访问的情况,工程师通常会选择一 ...
- DWR服务器推送技术
参考博客:https://blog.csdn.net/Marksinoberg/article/details/55505423 下载Dwr.jar文件 到官网http://directwebremo ...
- Shadow Map -- 点阴影(全方位)
昨晚终于把点阴影(深度CubeMap)程序调通了,思想不难,基本就是在上节定向光阴影基础上稍作修改,但是CG程序不太方便Debug,需要输出中间效果图进行判断,耽搁了一会儿. 过程如下: 1.将深度渲 ...
- go语言设计模式之template
template.go package template import ( "strings" ) type MessageRetriever interface { Messag ...
- 10. java 匿名对象说明
一.匿名对象 public class Demo{ public static void main(String[] args){ Person one = new Person(); one.nam ...
- acwing 23. 矩阵中的路径
习题地址 https://www.acwing.com/problem/content/description/21/ 题目描述请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路 ...