精华内容
下载资源
问答
  • vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解:v-model解决方式:{{item.name}}下拉框的值:index: [{...

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解:

    v-model解决方式:

    {{item.name}}

    下拉框的值:

    index: [{

    "indexId":1,

    "name": "点菜用户数"

    }, {

    "indexId":2,

    "name": "点菜新用户数"

    }, {

    "indexId":3,

    "name": "首次留联系方式人数"

    }, {

    "indexId":4,

    "name": "已有联系方式人数"

    }]

    在这里,indexId要在data里面声明一下

    事件:

    // 获取id值

    indexSelect(){

    console.log(this.indexId);//在这里可以正确输出每个下拉框对应的下标值,当然输出值都是可以的

    }

    改用$event的解决方式

    {{item.name}}

    事件:

    // 获取value值

    indexSelect(event){

    console.log(event.target.value);

    },

    图示:

    当然,可以根据自己的项目需要来选择哪种方法。在这里,v-on:change也可以写成v-on:click

    jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

    vue获取下拉框select的值

    1.我写的是循环遍历,然后获取id :value="v.id"这就是获取的id然后打印就可以获取id了

    vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

    Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

    Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项

    今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下

    VUE 单选下拉框Select中动态加载 默认选中第一个

    分类情况

    js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

    随机推荐

    [Unreal]学习笔记之材质说明

    取消蓝图中的连接线:Alt+鼠标左键 在蓝图中,通过按住1,2,3,4加鼠标左键,可以快速生成1,2,3,4维的向量 材质和材质实例的区别:使用一个母材质,可以创建出多种场景中的材质实例:每次修改母材 ...

    【转贴】Python处理海量数据的实战研究

    最近看了July的一些关于Java处理海量数据的问题研究,深有感触,链接:http://blog.csdn.net/v_july_v/article/details/6685962 感谢July ^_ ...

    Android音视频之MediaPlayer音视频播放

    前言: 昨天总结了视频录制,今天来学习一下视频的播放,Android的视频播放主要采用MediaPlayer类. MediaPlayer介绍 MediaPlayer类可用于控制音频/视频文件或流的播放 ...

    Android自动化测试-自动获取cpu和内存信息

    CpuInfo.java package com.dtest; import java.io.BufferedReader; import java.io.FileWriter; import jav ...

    SaltStack之Job管理和Runner(八)

    SaltStack之Job管理和Runner 配置文件/etc/salt/master cachedir: /var/cache/salt/master # cache路径 keep_jobs: 24 ...

    caffe学习系列(2):训练和测试自己的图片

    参考:http://www.cnblogs.com/denny402/p/5083300.html 上述主要介绍的是从自己的原始图片转为lmdb数据,再到训练.测试的整个流程(另外可参考薛开宇的笔记) ...

    Java中的异常处理机制的简单原理和应用

    异常是指java程序运行时(非编译)所发生的非正常情况或错误,与现实生活中的事件很相似,现实生活中的事件可以包含事件发生的时间.地点.人物.情节等信息,可以用一个对象来表示,Java使用面向对象的方式 ...

    《机器学习实战》之k-近邻算法(改进约会网站的配对效果)

    示例背景: 我的朋友海伦一直使用在线约会网站寻找合适自己的约会对象.尽管约会网站会推荐不同的人选,但她并不是喜欢每一个人.经过一番总结,她发现曾交往过三种类型的人: (1)不喜欢的人: (2)魅力一般 ...

    javascript 完美解决对联广告

    javascript 完美解决对联广告 // function couplet(){ if(arguments.length>=1) this.objID = document.getEleme ...

    DataGridView、List<T>相关操作

    一.DataGridView数据转成DataTable 1.已绑定过数据源:DataTable dt = (dataGridView1.DataSource as DataTable) 2.未绑定过数 ...

    展开全文
  • vue获取下拉框值

    千次阅读 2017-08-01 19:24:00
    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: <!-- 下拉框 --> <div v-...
    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解:
    v-model解决方式:
    <!-- 下拉框 -->
    <div v-show="moreStore" class="select">
      <select class="choice" v-on:change="indexSelect" v-model="indexId">
        <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
      </select>
    </div>
    下拉框的值:
    index: [{
      "indexId":1,
      "name": "点菜用户数"
      }, {
      "indexId":2,
      "name": "点菜新用户数"
      }, {
      "indexId":3,
      "name": "首次留联系方式人数"
      }, {
      "indexId":4,
      "name": "已有联系方式人数"
    }]
     
    在这里,indexId要在data里面声明一下
    事件:
    // 获取id值
    indexSelect(){
      console.log(this.indexId);//在这里可以正确输出每个下拉框对应的下标值,当然输出值都是可以的
    }
     
    改用$event的解决方式
    <!-- 下拉框 -->
    <div v-show="moreStore" class="select">
      <select class="choice" v-on:change="indexSelect($event)">
        <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
      </select>
    </div>
     
    事件:
    // 获取value值
    indexSelect(event){
      console.log(event.target.value);
    },
    图示:
     
     
    当然,可以根据自己的项目需要来选择哪种方法。在这里,v-on:change也可以写成v-on:click

    转载于:https://www.cnblogs.com/sunflower-zy/p/7270247.html

    展开全文
  • Vue获取下拉框的值

    千次阅读 2019-01-19 11:10:22
    一、获取含有默认省的下拉框name &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;...

    一、获取含有默认省的下拉框中的name值

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <body>
    <form id="app5">
        <select v-model="moren">
            <option v-for="datas in province" selected="selected" v-if="datas.aname==moren" :value="datas.aname">{{datas.aname}}</option>
            <option v-else :value="datas.aname">{{datas.aname}}</option>
            <input type="button" @click="ceshi" value="提交" />
        </select>
    </form>
    </body>
    <script>
        var app5 = new Vue({
                el: '#app5',
                data: {
                    province:'',
                    moren:'山东省',
                },
                methods: {
                    indexs:function(){
                        this.$http.post('{:url("Index/indexs")}')
                            .then(function(res){
                                this.province=res.data;
                                console.log(this.province);
                            })
                            .catch(function(error){
                                
                            });
                    },
                    ceshi:function(){
                        console.log(this.moren);
                    }
                },
                created(){
                    this.indexs();
                }
            });
    </script>
    </html>
    

    province:是中国所有的省。

    在这里插入图片描述

    二、获取含有默认省的下拉框中的id值

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <body>
    <form id="app5">
        <select v-model="moren">
            <option v-for="datas in province" selected="selected" v-if="datas.aid==moren" :value="datas.aid">{{datas.aname}}</option>
            <option v-else :value="datas.aid">{{datas.aname}}</option>
            <input type="button" @click="ceshi" value="提交" />
        </select>
    </form>
    </body>
    <script>
        var app5 = new Vue({
                el: '#app5',
                data: {
                    province:'',
                    moren:6,
                },
                methods: {
                    indexs:function(){
                        this.$http.post('{:url("Index/indexs")}')
                            .then(function(res){
                                this.province=res.data;
                                console.log(this.province);
                            })
                            .catch(function(error){  
                            });
                    },
                    ceshi:function(){
                        console.log(this.moren);
                    }
                },
                created(){
                    this.indexs();
                }
            });
    </script>
    </html>
    

    在这里插入图片描述

    三、获取所有省的name值

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <body>
    <form id="app5">
        <select v-model="moren">
            <option>请选择</option>
            <option v-for="datas in province" :value="datas.aname">{{datas.aname}}</option>
            <input type="button" @click="ceshi" value="提交" />
        </select>
    </form>
    </body>
    <script>
        var app5 = new Vue({
                el: '#app5',
                data: {
                    province:'',
                    moren:'请选择',
                },
                methods: {
                    indexs:function(){
                        this.$http.post('{:url("Index/indexs")}')
                            .then(function(res){
                                this.province=res.data;
                                console.log(this.province);
                            })
                            .catch(function(error){  
                            });
                    },
                    ceshi:function(){
                        console.log(this.moren);
                    }
                },
                created(){
                    this.indexs();
                }
            });
    </script>
    </html>
    

    在这里插入图片描述

    四、获取所有省的id值

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <body>
    <form id="app5">
        <select v-model="moren">
            <option :value="2">请选择</option>
            <option v-for="datas in province" :value="datas.aid">{{datas.aname}}</option>
            <input type="button" @click="ceshi" value="提交" />
        </select>
    </form>
    </body>
    <script>
        var app5 = new Vue({
                el: '#app5',
                data: {
                    province:'',
                    moren:'2',
                },
                methods: {
                    indexs:function(){
                        this.$http.post('{:url("Index/indexs")}')
                            .then(function(res){
                                this.province=res.data;
                                console.log(this.province);
                            })
                            .catch(function(error){  
                            });
                    },
                    ceshi:function(){
                        console.log(this.moren);
                    }
                },
                created(){
                    this.indexs();
                }
            });
    </script>
    </html>
    

    在这里插入图片描述

    展开全文
  • // 选择项value,也就是v-bind:value 绑定,如果换成 v-bind:value="item.id",则打印是 选中项id } } 扩展:获取下拉框选中项其他,如选中蓝色妖姬时获取它英文名 bluerose ($event)" v-model=...
    <select class="select" v-on:change="indexSelect($event)" v-model="pcNum">
    	<option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option>
    </select>
    
    js:
    
    data() {
    		return {
    			pcNum:'PC20200924',
    			pcArr:[
    					{id:1, pcNum: 'PC20200924'},
    					{id:2, pcNum: 'PC20200925'},
    					{id:3, pcNum: 'PC20200926'}
    			],
            }
     },
     methods:{
         indexSelect(e){
             console.log(e)
             console.log(e.target.selectedIndex) // 选择项的index索引
             console.log(e.target.value) // 选择项的value,也就是v-bind:value 的绑定值,如果换成 v-bind:value="item.id",则打印的是 选中项的id
         }
     }
    

    在这里插入图片描述
    扩展:获取下拉框选中项的其他值,如选中蓝色妖姬时获取它的英文名 bluerose

    <select class="select select2" @change="classSelect($event)"  v-model="classs">
    	 <option v-for="(item, index) in classsArr" :key="index" v-bind:value="item.name">{{ item.name }}</option>
    </select>
    
    js:
    data() {
        return {
        	classs:'',
    		classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜",  table: "chayote"}]
        };
    },
    methods: {
    	classSelect(e){
          	var table=''
    		for (var i in this.classsArr) {
          		i=e.target.selectedIndex
    			table=this.classsArr[i].table
    		}
    		console.log(table)
    	},
    }
    
    
    或者
    <select class="select select2" @change="classSelect"  v-model="classs">
    	   <option v-for="item in classsArr" :key="item.table" v-bind:value="item.table" :label="item.name"></option>
    </select>
    
    js:
    data() {
        return {
        	classs:'',
    		classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜",  table: "chayote"}]
        };
    },
    methods: {
    	classSelect(){
          	console.log(this.classs)
    	},
    }
    

    在这里插入图片描述

    展开全文
  • :value与v-model的值是互相绑定的,可以在data中定义变量进而直接获取到 如图,可以通过this,paneOneForm.villageId拿到value中绑定的id值 获取选中的文本值,即label值,结合使用数组的find方法 let obj = {} obj ...
  • 方法1::model="ruleForm"label-position="right"ref="ruleForm" // 被ref 标记status-iconsize="small"inline:rules="rules"label-width="150px"class="demo-ruleForm">:options="productsDataOptions"v-model...
  • vue中可以使用对象数组和v-for去循环创造出一个下拉框 代码如下 <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script> ...
  • obj = this.model.find((item)=>{//model就是上面数据源 return item.id === id;//筛选出匹配数据 }); vm.modelName=obj.model; console.log("modelName"+vm.modelName) }    
  • vue获取element-ui的下拉框的值

    万次阅读 2018-09-11 16:18:42
    vue+element 获取下拉框的值,代码: &lt;template&gt; &lt;div&gt; &lt;el-row&gt; &lt;el-col :span="5"&gt;&lt;div class="grid-content bg-purple&...
  • -- 下拉框获取value --> <el-select v-model="query" @change="selectChanged"> <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label"></el-option>
  • 方法1: <!-- element表单组件 -->...ref=ruleForm u6807记 status-icon size=small inline :rules rules label-width=150px class> 产品名称 prop=productKind> <!-- <el-input v-model.number=rul
  • Vue获取下拉框的文本及选项

    万次阅读 2019-05-30 09:42:46
    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" ...ref="ruleForm" // 被ref 标记 status-icon size="small" inline :rules="rules" label-width="150px" class="d...
  • 方法1::model="ruleForm"label-position="right"ref="ruleForm" // 被ref 标记status-iconsize="small"inline:rules="rules"label-width="150px"class="demo-ruleForm">:options="productsDataOptions"v-model...
  • vue select下拉框绑定默认值:首先option要加value值,以便v-model可以获取到对应选择的值一、当没有绑定v-model,直接给对应的option加selected属性二、当给select绑定了v-model的值的时候,要给v-model绑定的data...
  • $(document).ready(function() {//绑定下拉框change事件,当下来框改变时调用 SelectChange()方法$("#selectID")....})function SelectChange() {//获取下拉框选中项text属性var selectText = $("#selectID...
  • 这时候 需要配合使用v-bind,才能获取到选择那条数据id,其实就是id赋值给value属性{{ a.name }}您选择名字Id是:{{select}}js代码export default {data(){return{select:'',arr:[{id:'1',name:'html'},{...
  • 首先option要加value值,以便v-model可以获取到对应选择的值 一、当没有绑定v-model,直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值...

空空如也

空空如也

1 2 3 4 5 6
收藏数 114
精华内容 45
关键字:

vue获取下拉框的值

vue 订阅