基於Vue的三級聯動下拉框
展示
html部分
- 使用
v-model
設定和獲取select的值 - 使用
v-for
顯示option列表 - 使用
:value
設定option屬性 - 使用
{{}}
輸出內容
<div id="test">
單位:
<select v-model="UnitSelected">
<option v-for="item in UnitList" :value="item.id">{{item.name}}</option>
</select>
部門:
<select v-model ="DepartmentSelected">
<option v-for="item in DepartmentList" :value="item.id">{{item.name}}</option>
</select>
使用者:
<select v-model="UserSelected">
<option v-for="item in UserList" :value="item.id">{{item.name}}</option>
</select >
</div>
JavaScript部分
- 在
data
中定義vue相關變數 - 在
created
中完成初始化變數的操作 - 在
watch
中監聽Unit和Department下拉框的編號,並更新列表
var UnitRows = [
{name:"1",id:"1"},
{name:"2",id:"2"},
];
var DepartmentRows = [
{name:"11",id:"1",pid:"1"},
{name:"12",id:"2",pid:"1"},
{name:"21",id:"3",pid:"2"},
{name:"22" ,id:"4",pid:"2"}
];
var UserRows = [
{name:"111",id:"1",pid:"1"},
{name:"112",id:"2",pid:"1"},
{name:"121",id:"3",pid:"2"},
{name:"122",id:"4",pid:"2"},
{name:"211",id:"5",pid:"3"},
{name:"212",id:"6",pid:"3"},
{name:"221",id:"7",pid:"4"},
{name:"222",id:"8",pid:"4"}
]
var vm = new Vue({
el:"#test",
data:{
UnitSelected:"",
UnitList:[],
DepartmentSelected:"",
DepartmentList:[],
UserSelected:"",
UserList:[]
},
created:function () {
this.UnitList = UnitRows;
this.UnitSelected = this.UnitList.length>0 ? this.UnitList[0].id : "";
var val = this.UnitSelected;
this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";
val = this.DepartmentSelected;
this.UserList = UserRows.filter(function (x){ return x.pid == val});
this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
},
watch:{
UnitSelected:function (val) {
this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";
},
DepartmentSelected:function (val) {
this.UserList = UserRows.filter(function (x){ return x.pid == val});
this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
}
}
});
相關推薦
基於Vue的三級聯動下拉框
展示 html部分 使用v-model設定和獲取select的值 使用v-for顯示option列表 使用:value設定option屬性 使用{{}}輸出內容 <div i
原生的三級聯動下拉框
for .org char endif cti ima nal height local 最近在工作中遇到了一個需要三級聯動的功能,之前也只用到過地區聯動的三級菜單,還是用的插件,這次就不沒那麽好了,沒辦法,自己寫咯,我下面的寫出來的是原生的;寫的不好,不要噴我 一共有三個
前端省市區(縣)三級聯動下拉框
呼叫省市區的思想要先確定下來,一般是有多處呼叫,所以將省市區三級聯動抽取為工具js! 靜態頁面例子: <html> <head> <script type="text/javascript" src="address.js"></script
javascript年月日三級聯動下拉框
/* 在你的頁面需要這三條html程式碼 <select id="y" onchange="funy(this)"></select> <select id="m" onchange="fu
JSON+JS實現省市縣三級聯動下拉框
function Area(selector){ if (!Area.ALL_AREAS) { throw new Error('areas not init!'); } this.selector = selector; $(this.selecto
初學ajax,實現使用者名稱重複提示、二級/三級聯動下拉框
初學ajax,實現非同步操作! 以下為三級聯動下拉框部分程式碼 jsp頁面部分程式碼 <table> <tr> <th>下拉框:</th> &l
Android實現三級聯動下拉框 下拉列表spinner
布局 idt ets county wid 分享圖片 n) 技術分享 parent 主要實現辦法:動態加載各級下拉值的適配器 在監聽本級下拉框,當本級下拉框的選中值改變時,隨之修改下級的適配器的綁定值 XML布局:
省市區三級聯動選單實現及三級聯動下拉列表框預設值的設定
以下是HTML程式碼<html> <body> <label for="select_city">城市</label> <div data-role="controlgroup" id="select_p_c_a" data-ajax="false"&g
基於JQuery的Select下拉框下拉框聯動(級聯)
這段時間在指導學生完成實訓專案,由一個用到了JQuery進行下拉框(select)聯動(新增刪除option)的操作,本來在上課中都是講過的,但時間一長都忘光了,下面把這段簡單的JS貼出來,給入門者一個DEMO吧,以後有學生不會寫的時候他能到這找到參考。 程式碼要點: 1、
vue對select下拉框賦初值後,不能進行選擇的問題
Vue使用elementUI的select選擇器出現的問題: 初始化賦值後,無法更改label值,資料已經改變,但UI樣式為未變 原因:由於對此物件做了一些處理(將物件的鍵全部轉換成小寫),改變了物件的鍵和值,但是由於Vue檢測不到物件的變化,導致這個
Vue實現樹形下拉框
Vue自身並沒有實現樹形下拉框的元件,找了很多資料,最後在Github上找了個外掛vue-treeselect,功能還是比較全的,模糊搜尋、多選、延遲載入、非同步搜尋、排序,自定義、Vuex支援等等。這些功能在官網上都有詳細的介紹: vue-treeselect官網: vue-tre
vue 點擊下拉框
width v-for 下拉 puts play item padding block posit data: { hide:false, zhi:"全部" }, <div class="item"> &
兩級聯動下拉框的簡單實現
最近經常用到二級選單的情況,改變一個另一個跟著變化。自己寫了一個簡單的JSP頁面,大家給點意見,另外大家這種情況都是怎麼做的,當然Ajax除外![code]<%! public final String _JS_GET_METHOD_NAME="_do_get_seco
簡單的js日期三級聯動下拉程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
js省市縣三級聯動下拉列表的示例
function selectOnChange(SelId,toSelId){//document.getElementById(toSelId).innerHTML="";$.ajax({url:"<%=basePath%>medium/findAreaByParentId.do",type:"
利用ajax實現二級聯動下拉框
下拉框二級聯動,用ajax來實現是已經非常成熟的技術了。但對於我這個java菜鳥來說,真的是費了九牛二虎之力,各種百度,各種測試。終於得以實現。程式碼相對於網上的容易理解些。現把程式碼和我在編寫的過程中遇到的問題貼出來,對自己也是一個總結,同時也希望能幫助到跟我一樣的菜鳥。
android:省市二級聯動下拉框
xml佈局檔案: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
vue自定義下拉框元件
<template> <div class="selection-component"> <div class="selection-show" @click="toggleDrop"> <span :class="{'active': isDr
自己總結封裝了多級聯動下拉框js
/*支援多級下拉框 * data:查詢出來的所有資料,經過處理縮排的多級資料。子集用固定child, * pdata:選中的資料。字串用逗號隔開例:'4,57,557'如果沒有就空字串''; *
使用exceljs匯出部門-職位聯動下拉框的excel
import { Workbook } from 'exceljs'; /////////////////////////////// const wb = new Workbook(); const ws = wb.addWorksheet('tb'); const d