vue获取下拉框值

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

时间: 2024-10-17 07:17:03

vue获取下拉框值的相关文章

jquery 获取下拉框值与select text

下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").tex

vue select下拉框绑定默认值

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

获取下拉框第一个选项的值、最后一个选项的值、第二个选项的值

//假设网页里有下面这样一个下拉框 <select id="angelweb"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <

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

Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和文本: 1. IE和Firefox都支持的方法: 获取文本 var obj=document.getElementById('select_template'); var text=obj.options[obj.selectedIndex].text;//获取文本 var obj=document

获取下拉框的值并通过拼接方式添加到td后面

html:<tr> <td class="Hint"><span class="color-red">*</span>选择分组:</td> <td width="40%"> <select id="groupId2" style="width: 80%;height: 30px"> <option th:if=&quo

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

js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; // 选中索引 albumid= sel.options[index].value;//要的值 jQuery获取下拉框选中的option: $("#s option:selected").val();

jquery获得下拉框值的代码

jquery获得下拉框值的代码 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选

获取下拉框的文本值和value值

http://www.cnblogs.com/djgs/p/3691979.html?utm_source=tuicool&utm_medium=referral 现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: <span> <select id="AreaId" name="AreaId"

jquery获取下拉框的值

最近一个项目需要做前端,捡起好久不用的js,下拉框是我们经常用到的控件,有以下几种获得选中项的值: $("#select_id").find("option:selected").text(); $("#select_id").val(); $("#select_id").attr("value"); 其中需要主要的是第一种获得的内容可以包含空格,第二种和第三种获得的内容都不能包含空格,在此稍作记录,以后有