Vue.js获取被选择的option的value和text值方法

如下所示：

1.获取option的value的值，watch option 控件时，或自动获取option的value的值。

2.获取被选中的option的text的值时,使用：$("#optionID option:selected").text

拓展知识：select标签如何传递选中option的value值与text值方法

如下所示：

<select name="type" onchange="show_sub(this.options[this.options.selectedIndex].value)">
 <option value="0">请选择主菜名</option>
 <option value="1">白菜</option>
 <option value="2">萝卜</option>
 </select>

<select name="type" onchange="show_sub(this.options[this.options.selectedIndex].text)">
 <option value="0">请选择主菜名</option>
 <option value="1">白菜</option>
 <option value="2">萝卜</option>
 </select>

以上这篇Vue.js获取被选择的option的value和text值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue操作下拉选择器获取选择的数据的id方法

    实际项目中我们获取选择的数据的id:这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性 <template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</o

  • vue实现在表格里,取每行的id的方法

    如下所示: 1.在template上写上 slot-scope="scope" 2.然后在template里边的标签上,scope.row.id 以上这篇vue实现在表格里,取每行的id的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js+Element实现表格里的增删改查

  • vue如何通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

  • Vue.js获取被选择的option的value和text值方法

    如下所示: 1.获取option的value的值,watch option 控件时,或自动获取option的value的值. 2.获取被选中的option的text的值时,使用:$("#optionID option:selected").text 拓展知识:select标签如何传递选中option的value值与text值方法 如下所示: <select name="type" onchange="show_sub(this.options[thi

  • vue.js 获取select中的value实例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <

  • vue.js获取数据库数据实例代码

    vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态的文件放在static目录下) { "data":[ {"id":1,"name": "yidong", "age": "11" }, {"id":2,"name

  • Vue.js获取手机系统型号、版本、浏览器类型的示例代码

    1.index.html引入 <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"> </script> 2.直接用 <script> //判断数组中是否包含

  • JS获取下拉框显示值和判断单选按钮的方法

    本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu

  • 在vue.js中使用JSZip实现在前端解压文件的方法

    1. 在vue文件的html中引入element的上传控件,代码如下: <div> <el-upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore"> <el-button size="small" type="primary">点击上传</el-button> <

  • 使用vue点击li,获取当前点击li父辈元素的属性值方法

    vue实现加载并展示后台数据的tab选项卡 vue用于渲染页面 jquery用于方法实现动态效果 <div class="content"> <!-- change方法, 数值改变触发 --> <select v-on:change="getData()" name="" id="dataSelect"> <option value="" v-bind:name=&

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • JS获取子节点、父节点和兄弟节点的方法实例总结

    本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo

随机推荐