Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法:
第一种:
Add.html:
<select v-model="sysNotice.noticeType" id="noticeType" class="form-control">
<option disabled value="" selected>请选择</option>
<option v-for="item in itemList" v-bind:value="item.macroId">
{{ item.name }}
</option>
</select>
Add.js:
var vm = new Vue({
el:'#dpLTE',
data: {
itemList:[], //define select control list
sysNotice: {
noticeId: ,
status:,
noticeType: '' //默认未空,则选择框会自动默认为请选择
}
},
methods : {
getNoticeTypeList: function() {
$.getJSON('../../sys/macro/value?value=noticetype', null, function(data){
vm.itemList = data;
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
}
if($("#noticeType option:selected").text()=="请选择"){
$("#noticeType").focus();
return false;
}
$.SaveForm({
url: '../../notice/save?_' + $.now(),
param: vm.sysNotice,
success: function(data) {
$.currentIframe().vm.load();
}
});
},
created: function() {
this.getNoticeTypeList();
}
})
Edit.html:
<select v-model="sysNotice.noticeType" id="noticeType" class="form-control">
<option disabled value="">请选择</option>
<option v-for="item in itemList" v-bind:value="item.macroId">
{{ item.name }}
</option>
</select>
Edit.js:
* 编辑-通知公告表js
*/
var vm = new Vue({
el:'#dpLTE',
data: {
itemList: [],
sysNotice: {
noticeId: 0
}
},
methods : {
loadTypeList: function() {
$.getJSON('../../sys/macro/value?value=noticetype', null, function(res){
vm.itemList = res;
});
setForm: function() {
$.SetForm({
url: '../../notice/info?_' + $.now(),
param: vm.sysNotice.noticeId,
success: function(data) {
//vm.sysNotice = data; //注意这里用下边的赋值方式,如果直接这样会出现select不能回显的情况发生
vm.sysNotice.noticeType=data.noticeType;
vm.sysNotice.noticeTitle=data.noticeTitle;
vm.sysNotice.noticeContent=data.noticeContent;
vm.sysNotice.status=data.status;
vm.sysNotice.createBy=data.createBy;
vm.sysNotice.createTime=data.createTime;
vm.sysNotice.updateBy=data.updateBy;
vm.sysNotice.updateTime=data.updateTime;
vm.sysNotice.remark=data.remark;
vm.loadTypeList(); //调用loadTypeList方法
//$("#aaa").val(vm.sysNotice.noticeType);
}
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
}
$("#noticeType").val(vm.sysNotice.noticeType); // 设置Select的Value值为4的项选中
vm.sysNotice.noticeType = $('.noticeTypeSelect').val();
$.ConfirmForm({
url: '../../notice/update?_' + $.now(),
param: vm.sysNotice,
success: function(data) {
$.currentIframe().vm.load();
}
});
}
}
})
在edit页面提交的时候:
setForm: function() {
$.SetForm({
url: '../../notice/info?_' + $.now(),
param: vm.sysNotice.noticeId,
success: function(data) {
vm.sysNotice = data;
/*alert(vm.sysNotice.noticeType);*/
$('.noticeTypeSelect').val(vm.sysNotice.noticeType); //设置Select默认选中项
//$("#noticeType").val(vm.sysNotice.noticeType); // 设置Select默认选中项
//$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
}
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
}
vm.sysNotice.noticeType=$(".noticeTypeSelect").val(); //在这里设置一下就可以了 $.ConfirmForm({
url: '../../notice/update?_' + $.now(),
param: vm.sysNotice,
success: function(data) {
$.currentIframe().vm.load();
}
});
第二种方法:
Add.html:
<select class="form-control noticeTypeSelect" v-model="sysNotice.noticeType" isvalid="yes" checkexpession="NotNull"></select>
Add.js:
var vm = new Vue({
el:'#dpLTE',
data: {
itemList:[], //define select control list
sysNotice: {
noticeId: ,
status:,
noticeType: '' //默认未空,则选择框会自动默认为请选择
}
},
methods : {
getNoticeTypeList: function() {
$('.noticeTypeSelect').selectBindEx({
url: '../../sys/macro/value?value=noticetype',
placeholder: '请选择',
value: 'macroId',
text: 'name',
selected:''
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
}
if($("#noticeType option:selected").text()=="请选择"){
$("#noticeType").focus();
return false;
} $.SaveForm({
url: '../../notice/save?_' + $.now(),
param: vm.sysNotice,
success: function(data) {
$.currentIframe().vm.load();
}
});
}
},
created: function() {
this.getNoticeTypeList();
}
})
Edit.html:
<select class="form-control noticeTypeSelect" v-model="sysNotice.noticeType" id="noticeType" isvalid="yes" checkexpession="NotNull"></select>
Edit.js:
var vm = new Vue({
el:'#dpLTE',
data: {
sysNotice: {
noticeId:
}
},
methods : {
getNoticeTypeList: function() {
$('.noticeTypeSelect').selectBindEx({
url: '../../sys/macro/value?value=noticetype',
placeholder: '请选择',
value: 'macroId',
text: 'name',
selected:vm.sysNotice.noticeType //注意这里,select自动回显设置
});
},
setForm: function() {
$.SetForm({
url: '../../notice/info?_' + $.now(),
param: vm.sysNotice.noticeId,
success: function(data) {
vm.sysNotice = data;
vm.getNoticeTypeList();
}
});
},
acceptClick: function() {
if (!$('#form').Validform()) {
return false;
}
vm.sysNotice.noticeType=$(".noticeTypeSelect").val(); //这里设置一下即可;
//alert($(".noticeTypeSelect").val());
$.ConfirmForm({
url: '../../notice/update?_' + $.now(),
param: vm.sysNotice,
success: function(data) {
$.currentIframe().vm.load();
}
});
}
}
})
测试图例:
Vue.js中使用select选择下拉框的更多相关文章
- selenium select 选择下拉框
实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...
- 【selenium】基于python语言,如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
- js中年份、月份下拉框
<select id="year" style="width: 100px;"></select> <select id=&quo ...
- 简单的Extjs中的Combox选择下拉框使用
{ xtype: "combobox", editable: false, emptyText: "--请选择--", mode: 'local', store ...
- 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)
微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...
- js基于json的级联下拉框
级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 关于java 获取 html select标签 下拉框 option 文本内容 隐藏域
在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"typ ...
- js实现可输入的下拉框
<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...
随机推荐
- Android Camera MSM HAL
高通新的camera驱动架构设计发生了一些变化,借用互联网上常用的一种结构,大致的原理如此:将camera的所有功能划分为不同的模块,让模块自己来决定自己的事情(高内聚,低耦合),模块需要有统一的接口 ...
- 【原创】运维基础之Docker(3)搭建私有仓库
下载并启动registry $ docker pull registry$ docker run --name my_registry -d -p 5000:5000 -v /var/lib/regi ...
- jq-css、class、属性操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ES6 语法学习(一)
1.let 和 const 关键字 let 与 var 的区别有: a.let 声明的变量只在当前的块级作用域内有效(块级作用域通俗的话就是被{}包裹起来的区域声明对象的{}例外). b.let 声明 ...
- Ubuntu 18.04LTS 更新镜像配置
清华大学开源镜像站:https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ Ubuntu 的软件源配置文件是 /etc/apt/sources.list.将 ...
- React-Native采坑总结
1.zIndex 在Android上使用zIndex来控制组件的层级,会遇到元素不显示的问题. 解决方案: 尽量改变组件的顺序,而不用zIndex 尽量不要使用zIndex来控制组件的层级,默认情况下 ...
- Linux查看设备命令
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...
- cJSON源码分析
JSON (JavaScript Object Notation) 是一种常见使用的轻量级的数据交换格式,既有利于人工读写,也方便于机器的解析和生成. 关于JSON格式的定义,参看网站[1].在该网站 ...
- day15.Python内置函数
作用域相关 locals() -- 获取执行本方法所在命名空间的局部变量的字典 globals() -- 获取全局变量的字典 print(locals()) print(globals()) {'_ ...
- php操作数据库获取到的结果集mysql_result
判断取出的结果集是否为空集: $sql="select adminPwd from adminaccount"; //判断查询是否有数据 if(mysqli_num_rows($r ...