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 ...
随机推荐
- 37-Data Volume 之 bind mount
storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...
- 当您解开后您从 Internet 上下载的压缩的文件时,文件的修改日期更改为您提取它的日期
用鼠标右键单击该压缩的文件,然后单击属性. 单击常规选项卡,请单击取消阻止,然后单击确定. 从压缩文件中提取文件.
- fastadmin安装定时插件报错 ZipArchive::extractTo(): Permission denied
环境linux上直接安装 如果你是在win开发号直接部署的应该是没问题 我是直接在linux安装的 这几天研了下fastadmin 想用他的定时可是在使用的时候报错 ZipArchive::e ...
- 自己用到的解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误的办法如下:
Python3.6.5 Django2.0 这是Django版本与xadmin兼容的问题 解决办法如下: 注释掉如下代码: def render(self, name, value, attrs=No ...
- django升级2.1python升级3.7时出现的错误:"trying to load '%s': %s" % (entry[1], e) django.template.library.InvalidTemplateLibrary:
django升级2.1python升级3.7时出现如下的错误: "trying to load '%s': %s" % (entry[1], e) django.template. ...
- The 2017 ACM-ICPC Asia Beijing Regional Contest
传送门 C - Graph 题意: 给出一个\(n\)个点\(m\)条边的无向图.现在有多组询问,每组询问给出区间\([l,r]\),问区间\([l,r]\)中有多少点对是连通的. 思路: 若考虑只有 ...
- vue项目中引入特殊字体
特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...
- http返回头中content-length与Transfer-Encoding: chunked的问题释疑
先说说问题出现的背景: 公司服务器与手机客户端交互,客户端请求一个动态生成的XML文件,在用firebug查看http响应头的时候,有时候发现有content-length属性,有时候没 ...
- python爬虫之csv文件
一.二维数据写入csv文件 题目要求: 读入price2016.csv文件,将其中的数据读出,将数字部分计算百分比后输出到price2016out.csv文件中 知识点: 对于列表中存储的二维数据, ...
- Hibernate 知识收纳.
一.乐观锁和悲观锁 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿 ...