热门搜索 :
汽车文化
您的当前位置:首页正文

vue.js select下拉框绑定和取值方法

2023-12-08 来源:学车网

最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下:

1、绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档:

地址:https://cn.vuejs.org/v2/api/

:value绑定的值就是这个下拉框对应的value值

<select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="send in sendList" name="sendSymbolId" :value="send.VALUE" >{{send.CODE}}</option> </select> 

2、取值就直接获取下拉框,v-model绑定的属性就可以

以上这篇vue.js select下拉框绑定和取值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

以上这篇vue.js select下拉框绑定和取值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

vue.js的select下拉框怎样绑定事件和取值

html:

<span>{{selectPreMenu}} </span>

<select v-model="selectPreMenu" @change="chooseSelect(selectPreMenu)">

<option disabled value="">--=请选择=--</option>

<option v-for="option in options" :value="option.MENU_ID">

{{ option.MENU_NAME }}

</select>

js:

var vm= new Vue({

el: '#addModal',

data :{

selectPreMenu: '',

options: [],//这里的值可以由后台传过来初始化

},

methods:{

selectPreMenu:function(selectPreMenu){

console.log(selectPreMenu+':'+selectPreMenu)

this.selectPreMenu = selectPreMenu;

}

}

});

如何利用VueJS创建动态的下拉框并绑定数据源

第一步,在HBuilder编辑工具新建HTML5空白页面select.html,并引入VueJS核心js文件,如下图所示:

第二步,在body标签元素内插入div和select,注意给指定标签元素id属性值,如下图所示:

第三步,在div下方编写生成下拉框的数据源和绑定元素,下拉框有value和text,如下图所示:

第四步,预览该静态页面,发现下拉框什么都没有;打开浏览器控制台发现出现错误,如下图所示:

第五步,修改option标签数据绑定形式,利用v-bind,将js代码中的sel改为data,如下图所示:

6.第六步,再次预览该静态页面,发现下拉框数据源正确绑定,可以选择

45、vue select下拉框绑定默认值

vue select下拉框绑定默认值:

首先option要加value值,以便v-model可以获取到对应选择的值

一、当没有绑定v-model,直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值

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
}}</option>
</select>
<p>您选择的名字的Id是:{{select}}</p>
</div>
</template>
js代码
<script>
export
default
{
data(){
return{
select:'',
arr:[
{id:'1',name:'html'},
{id:'2',name:'css'},
{id:'3',name:'js'},
]
}
}
}
</script>
拓展知识:vue获取id以及重定向路由方法
1.获取ID的方法:
let
orderId=this.$route.query.id;
2.路由重定向方法
this.$router.push(this.$route.query.redirect
||
'/login')
以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue.js获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法

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
}}</option>
</select>
<p>您选择的名字的Id是:{{select}}</p>
</div>
</template>
js代码
<script>
export
default
{
data(){
return{
select:'',
arr:[
{id:'1',name:'html'},
{id:'2',name:'css'},
{id:'3',name:'js'},
]
}
}
}
</script>
拓展知识:vue获取id以及重定向路由方法
1.获取ID的方法:
let
orderId=this.$route.query.id;
2.路由重定向方法
this.$router.push(this.$route.query.redirect
||
'/login')
以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue.js获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法

vue3 实现 select 下拉选项

本人学生 , 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用 Vue2.x 的版本做项目, 暑假刚刚学习了 Vue3 想着新项目就直接用 Vue3 上手.

好了, 话不多说先给大佬们看看效果样式:

因为下拉框可能会在某些情况下被挡住, 所以这里的下拉框被挂载到了 body 标签上, 并且下拉框中的选项往往是以 <slot> 插槽的形式编写, 这里就会困扰到很多小白, 搞不明白怎么样才能在 下拉框 与 触发下拉按钮 之间关联响应式事件与数据.

tk-select 为 select 下选项父标签, 必须含有插槽 #selectDropDown 才能正常使用

tk-select-item 为**select

**下选项子标签(选项标签), tk-select-item 内可以继续写入其他 HTML 内容, 每项的具体值由props value 决定

可以使用 v-modal 实时获取到 下拉选项 选取到的值

首先看看目录结构

两个 .vue 文件用来的干嘛的没什么好说的, selectBus.js 解决 Vue3 中无法安装 eventBus 的问题, token.js 用于给每组 selec t 与 select-item 相互绑定.

我们先看看 vue3 官网怎么说的 进入官网 . 说人话的意思就是不可以像 vue2 那样愉快的安装 Bus , 需要 自己实现事件接口 或者使用 第三方插件 . 这里官网也给出了具体实现方案.

vue3 新增 <teleport> 标签, 可以将标签内的元素挂载到任意位置, 查看官方文档

select 主要有触发下拉按钮 tk-select-button 和下拉列表 tk-select-dropdown 组成, 下拉框中的选项未来将由插槽插入.

首先解决下拉列表打开&关闭和定位的问题

在 select.vue 中接收事件

到这里下拉选项框基本就完成了. 我们像页面添加第一个下拉选项时非常完美,但是如果页面上有两个 select 存在时问题来了. 我们发现当控制其中一个选项被选中是, 另外一个 select 显示的值也随之改变. 我们需要将一组 select & select-item 进行绑定,让 Bus 在接受时知道事件来自于哪个里面的 select-item .

在 vue2 中我们通常获取实例的 parent 然后一层一层寻找父类 select , 但是在 vue3 setup 中并不能获取到正确的 parent , 所以我想到了可以在 select 创建时派发一个 token 在讲此令牌传给所有子类, 好了理论存在, 开始实践.

在vue中使用 provide 可以向子类、孙类等等后代传输数据, 后代使用 inject 接收数据. 查看官网

这里可以模仿Java中的UUID

在 select 创建时生成 token 并派发给后代

这样我们在子类接收后每次使用 bus 发送数据时带上 token

在 select.vue 监听Bus后先验证token

github.com/18651440358/vue3-select

第一次写帖子几分激动几分不知所措, 请各位大佬指点错误或可以优化的地方, 欢迎大家讨论.

js给select下拉框绑定值 代码如下 : 值获取到了但是绑定不到下拉框里面

你的错误是大家经常会容易忽略的。cl_type你指向的是select的值,而不是它本身的控件,所以你在后面只是改变了这个值,而没有把其赋给该控件。

正确做法:

var cl_type= document.getElementById("cl_type");

cl_type.value=str;//这样才是给控件赋值

cl_type.options[id].selected=true;

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top