您的当前位置:首页element-ui中select组件绑定值改变,触发change事件方法
广告

element-ui中select组件绑定值改变,触发change事件方法

2023-12-07 来源:哗驼汽车网

1.安装vuecli脚手架

2.终端输入

cnpm i element-ui -S

安装element-ui

3.按需引入select组件

在main.js中写入如下代码

/* 导入第三方库开始 */import 'element-ui/lib/theme-chalk/index.css';// 按需加载Select组件import {Select,Option,Dialog,Button} from 'element-ui'Vue.use(Select)Vue.use(Option)Vue.use(Dialog)Vue.use(Button)// Vue.component(Select.name,Select);// 或写为Vue.use(Button)/* 导入第三方库结束 */

HelloWorld.vue代码

<template><div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>{{selVal}}</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> <el-select v-model="value" multiple placeholder="请选择" @change="currentSel"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"> </el-option> </el-select></div></template><script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '', dialogVisible: false, selVal : '' } }, methods: { currentSel(selVal){ this.selVal = selVal; this.dialogVisible = true; } } }</script>

拓展知识:element-ui 点击编辑弹出dialog组件中select组件绑定值改变,但是不触发change事件的方法

代码结构如下:

现象视频如下:

现象原因:经过排查发现 此时点击操作不触发chang事件,后台响应数据中没有订单取消原因orderCanleRemark字段,此时导致不触发change事件,

解决方案:

方案1:让后台配合响应该字段,无论是否为空都响应该字段

方案2:在后台响应数据赋值给,this.form之前,手动添加该字段到后台响应数据中

代码如下:

以上这篇element-ui中select组件绑定值改变,触发change事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

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

select事件的onchange方法

//select中的onchange是在下拉框中所选的值发生变化时触发的事件。

//可以给onchange事件绑定一个方法,在onchange事件触发时会执行绑定的方法。

//示例:

//首先可以响应select的onchange事件来调用JS编写的事件响应函数,如

<select id="select1" name="select1" onchange="outputSelect();">

<option>...

</select>

//然后编写事件响应函数:

//如果select位于表单(form1)中,select的name为select1,则可使用如下方法:

//获得用户选中的项的索引

var index=window.document.form1.select1.selectedIndex;

//根据索引获得该选项的value值

var val=window.document.form1.select1.options[index].value;

//如果select并非表单元素,假设select的id为select1,则如下:

var index=window.document.getElementByIdx_xx_x("select1").selectedIndex;

var val=window.document.getElementByIdx_xx_x("select1").options[index].value;

//如果要输出选择结果,假设HTML中定义了一个<div id="output"></div>,则如下输出:

window.document.getElementByIdx_xx_x("output").innerText=val;

//一个示例:

function outputSelect(){

//获取用户选中的项的索引

var index=window.document.getElementByIdx_xx_x("select1").selectedIndex;

//根据index获取选中项的value值

var val=window.document.getElementByIdx_xx_x("select1").options[index].value;

//根据index获取选中项的Text值,即在下拉列表中显示的选项文本

var vname=window.document.getElementByIdx_xx_x("select1").options[index].text;

//输出value :

textdocument.getElementByIdx_xx_x("output").innerText=val " : " vname;

select的onchange事件如何绑定方法或者事件?

在JavaScript中,你可以使用addEventListener方法来绑定select元素的onchange事件。以下是如何实现的示例:

HTML代码:

JavaScript代码:

在上面的代码中,我们首先获取了select元素,然后定义了一个处理onchange事件的函数handleSelectChange。最后,我们使用addEventListener方法将handleSelectChange函数绑定到select元素的change事件上。

当用户在select元素中选择不同的选项时,handleSelectChange函数将被调用,你可以在该函数内执行你想要的操作,例如根据用户的选择更新页面内容。

element-ui table组件 toggleRowSelection被动触发select/selection-change事件

element的table组件中,如果要设置默认选中,需要使用组件提供的方法toggleRowSelection,但是这玩意会触发组件绑定的selection-change事件,但是selection-change又是手动点击事件,不能被toggleRowSelection触发,解决方法是:

加一把锁 flag

select中onchange的用法

用法:onchange 事件会在域的内容改变时发生。

onchange="SomeJavaScriptCode"

onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的!

onmousedown 单击一次就查询一次,所以每选择一次就查询一次,增加了数据库的负担。每次选择至少要查询两次(一次是在数据库加载数据,一次是选择选项时又触发一次,)

咧:

<select name="expireDay" id="expireDay" class="form-control" 

onchange="searchChange(this.options[this.options.selectedIndex].value);">

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

<option

<c:if test="${'0' == expireRemind.searchType}">

selected

</c:if>

value="0">aa</option>

<option 

<c:if test="${'1' == expireRemind.searchType}">

selected

</c:if>

value="1">bb</option>

</select>

可以显示和隐藏

function searchChange(obj){

if(obj=="0"){

$('#expireDate').hide();

$('#soonExpireDay').show();

}

if(obj=='1'){

$('#soonExpireDay').hide();

$('#expireDate').show();

}

}

扩展资料

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。 

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

参考资料来源:百度百科-javascript

哗驼汽车网还为您提供以下相关内容希望对您有帮助:

select的onchange方法

//首先可以响应select的onchange事件来调用JS编写的事件响应函数,如 &lt;select id="select1" name="select1" onchange="outputSelect();"&gt; &lt;option&gt;...&lt;/select&gt; //然后编写事件响应函数://如果select位于表单(form1)...

element ui select 后台赋值后无法选中的问题

1、在el-select 加一个change 事件刷新一下就可以了 change="refreshStatus"&lt;el-form-item&gt; &lt;el-select v-model="form.status" placeholder="请选择" @change="refreshStatus"&gt; &lt;el-option v-for="item in status_li...

select的onchange事件如何绑定方法或者事件?

在上面的代码中,我们首先获取了select元素,然后定义了一个处理onchange事件的函数handleSelectChange。最后,我们使用addEventListener方法将handleSelectChange函数绑定到select元素的change事件上。当用户在select元素中选择不同的选项...

select的onChange事件触发与多次执行

第一个默认选中 这样在选择第二个时,值就会变即可触发onChange;我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能...

&lt;select&gt;控件中,选中第一个值是不会触发onchange事件的,如何使选中第一...

一般情况下select的第一个选项是默认选项,当你选中第一个项时,由于值没有改变,所以是不会触发onchange事件的。解决这个问题并没有什么完美的办法,一般你可以增加一个空值的项作为第一选项,比如&lt;option&gt;请选择&lt;/option&gt;...

element-ui table组件 toggleRowSelection被动触发select/selection-ch...

element的table组件中,如果要设置默认选中,需要使用组件提供的方法toggleRowSelection,但是这玩意会触发组件绑定的selection-change事件,但是selection-change又是手动点击事件,不能被toggleRowSelection触发,解决方法是:加一把锁...

vue+element el-select 选项无法选择的问题

使用Vue框架和element-ui开发时,在el-select下拉框遇见的问题,改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中。有人说写个change事件就好了,然而并没有...

ElementUI table触发current-change事件问题

在用elementui的table时,如果监听了current-change事件,在重新给table的data赋值时(比如新增或者删除数据),会触发current-change事件,因为重新渲染列表,current-change发生了改变,从原本选择的row变成不在选择任何一行,而这...

element组件select 基础多选怎么规定选最多的

去看element-ui的官方文档后发现select组件当中还有个visible-change事件,在visible-change事件当中添加个数据起到开关的作用,只有在点击下拉的时候‘开关’才打开。 才能执行change事件。当点击下一页的时候将开关关闭。

changestyle函数用法

这个函数的第一种用法是 .bind('change', handler) 的快捷方式,第二种用法是 .bind('change') 的快捷方式。一个元素的值改变的时候将触发change事件。此事件仅限于&lt;input&gt;元素,&lt;textarea&gt;框和&lt;select&gt;元素。对于选择...

Top