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 ...
随机推荐
- python连数据库制作音乐软件
import pymysql conn = pymysql.connect(host="localhost",user="root",password=&quo ...
- python配置yaml
我们在做自动化的过程中无论是接口自动化还是UI自动化都会存在很多数据,我们对于自动化中如何存放这些数据也是很重要一点,如果写在代码里的话,每次更换数据就有点繁琐,我们可以通过一个文件存放这些数据,然后 ...
- 在 VS 中查看所有线程
查看当前所有线程 在程序中打断点,然后启动调试(注意:线程窗口需要启动调试才可以看得到)点击 Debug > Windows > Threads 线程窗口如下:
- acwing 600. 仰视奶牛
题目地址 https://www.acwing.com/problem/content/description/602/ 约翰有N头奶牛,编号为1到N. 现在这N头奶牛按编号从小到大的顺序站成了一排 ...
- Codeforces Round #594 (Div. 1) A. Ivan the Fool and the Probability Theory 动态规划
A. Ivan the Fool and the Probability Theory Recently Ivan the Fool decided to become smarter and stu ...
- HTML连载48-清除浮动的其中两种方式
一.清除浮动的方式一 给前面一个父元素设置高度,注意:企业开发中能不写高度就不写高度 <!DOCTYPE html> <html lang="en"> & ...
- js input radio点击事件
html代码: <input type="radio" name="myname" value="1" />1 <inpu ...
- js scroll事件
滚动改变头部颜色,当滚动到最顶端头部颜色还原 滚动前 滚动后 代码
- git分支合并解决冲突
git分支合并,解决冲突 1.手动解决冲突 手动解决冲突,需要使用编辑器,把所有文件中出现的冲突地方修改,然后再添加到暂存区再提交 >>>>>>brancha so ...
- Linux网络基础协议和ip管理
1.简述osi七层模型和TCP/IP五层模型 osi七层模型分别是:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. 1)物理层:这一层的主要功能是二进制传输数据,界定连接器和网线的规格: ...