在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选择下拉框的更多相关文章

  1. selenium select 选择下拉框

    实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...

  2. 【selenium】基于python语言,如何用select选择下拉框

    在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...

  3. js中年份、月份下拉框

    <select id="year" style="width: 100px;"></select> <select id=&quo ...

  4. 简单的Extjs中的Combox选择下拉框使用

    { xtype: "combobox", editable: false, emptyText: "--请选择--", mode: 'local', store ...

  5. 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)

    微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...

  6. js基于json的级联下拉框

    级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...

  7. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  8. 关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

    在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"typ ...

  9. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

随机推荐

  1. Gradle part1 HelloWorld

    (https://spring.io/guides/gs/gradle/#scratch) ----gradle helloworld----- 1.下载后安装 Unzip the file to y ...

  2. 让CPU占用率曲线听你指挥

    使用GetTickCount()和Sleep(): Code#include <stdio.h> #include <unistd.h> #include <time.h ...

  3. Android Studio打开项目,停在gradle的解决方案

    之所以停留,是因为打开项目时,Android Studio解析项目使用的gradle,并下载对应版本的gradle,但是由于下载gradle的服务器在国外,这个下载速度非常不稳定,从而导致停留在这一步 ...

  4. vs2010编译error_code

    C1083 : 现象: xxxxx.cpp clxx:fatal error C1083:无法打开源文件: “..\..\..\..\src\folder1\folder2\folder3\folde ...

  5. hexo基本操作

    1.新建一篇文章:hexo new post "article title" 2.生成静态网页:hexo g 3.预览效果:hexo s 4.发布:hexo d

  6. js的逆向解析

    过程: 知道如何寻找登录的接口 知道如何确定js的位置 知道如何观察js的执行过程 知道js的执行方法 1. 确定网站的登录的接口登录的form表单中action对应的url地址通过抓包可以发现,在这 ...

  7. Mongodb字段自增长

    MongoClient client = new MongoClient("mongodb://xxx.xxx.x.xx:27017"); var mongServer = cli ...

  8. Kubernetes 学习1 k8s架构概述

    一.概述 1.意思:舵手,飞行员 2.特点 a.自动装箱,自我修复,水平扩展,服务发现和负载均衡,自动发布和回滚. b.密钥和配置管理,存储编排,批量处理执行. 二.架构术语 1.集群 master( ...

  9. vue中mint-ui的filed的与blur事件结合实现检查用户输入是否正确

    标题mint-ui的filed与blur事件验证用户输入格式是否正确说明:本人前端菜鸟,只是想借个地方做个笔记,为了以后查阅时比较方便.如有大神有什么建议的地方,欢迎提出来. 1.不得不说,mint- ...

  10. JDK 5~8的特性对比

    原文请参考:https://bbs.csdn.net/topics/392062347 jdk5新特性 1.自动装箱和拆箱2.枚举3.静态导入4.可变参数5.內省   是Java语言对Bean类属性. ...