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'> ...
随机推荐
- Gradle part1 HelloWorld
(https://spring.io/guides/gs/gradle/#scratch) ----gradle helloworld----- 1.下载后安装 Unzip the file to y ...
- 让CPU占用率曲线听你指挥
使用GetTickCount()和Sleep(): Code#include <stdio.h> #include <unistd.h> #include <time.h ...
- Android Studio打开项目,停在gradle的解决方案
之所以停留,是因为打开项目时,Android Studio解析项目使用的gradle,并下载对应版本的gradle,但是由于下载gradle的服务器在国外,这个下载速度非常不稳定,从而导致停留在这一步 ...
- vs2010编译error_code
C1083 : 现象: xxxxx.cpp clxx:fatal error C1083:无法打开源文件: “..\..\..\..\src\folder1\folder2\folder3\folde ...
- hexo基本操作
1.新建一篇文章:hexo new post "article title" 2.生成静态网页:hexo g 3.预览效果:hexo s 4.发布:hexo d
- js的逆向解析
过程: 知道如何寻找登录的接口 知道如何确定js的位置 知道如何观察js的执行过程 知道js的执行方法 1. 确定网站的登录的接口登录的form表单中action对应的url地址通过抓包可以发现,在这 ...
- Mongodb字段自增长
MongoClient client = new MongoClient("mongodb://xxx.xxx.x.xx:27017"); var mongServer = cli ...
- Kubernetes 学习1 k8s架构概述
一.概述 1.意思:舵手,飞行员 2.特点 a.自动装箱,自我修复,水平扩展,服务发现和负载均衡,自动发布和回滚. b.密钥和配置管理,存储编排,批量处理执行. 二.架构术语 1.集群 master( ...
- vue中mint-ui的filed的与blur事件结合实现检查用户输入是否正确
标题mint-ui的filed与blur事件验证用户输入格式是否正确说明:本人前端菜鸟,只是想借个地方做个笔记,为了以后查阅时比较方便.如有大神有什么建议的地方,欢迎提出来. 1.不得不说,mint- ...
- JDK 5~8的特性对比
原文请参考:https://bbs.csdn.net/topics/392062347 jdk5新特性 1.自动装箱和拆箱2.枚举3.静态导入4.可变参数5.內省 是Java语言对Bean类属性. ...