Vue.js组件之联动下拉框
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<link href="../public/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="../public/javascripts/jquery.js" type="text/javascript"></script>
<script src="../public/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../public/javascripts/vue.js" type="text/javascript"></script>
</head>
<div class="row" id="selectOptions">
<div class="col-md-3">
<h4> {{preTitle}}</h4>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{title}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li v-for="item in countrys"><a href="#" v-on:click="warn">{{item.country}}</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{title2}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li v-for="item in items2"><a href="#" v-on:click="warn2">{{item.province}}</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{title3}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li v-for="item in items3"><a href="#" v-on:click="warn3">{{item.city}}</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Js部分：
<script>
var vm=new Vue({
el:"#selectOptions",
data:{
preTitle:"联动下拉框",
title:"国家",
title2:"省份",
title3:"市区",
countrys:[
{country:"中国"},
{country:"美国"},
{country:"日本"}
],
items2:[],
items3:[]
},
methods:{
warn:toSelect2,
warn2:toSelect3,
warn3:recordSelect3,
}
});
function toSelect2(event){
vm.items2=[];
var content=event.target.text;
vm.title=content;
var provinces=[{province:"江苏省"},{province:"浙江省"},{province:"上海市"}];
for(var item in provinces){
vm.items2.push(provinces[item]);
}
}
function toSelect3(event){
vm.items3=[];
var content=event.target.text;
vm.title2=content;
var citys=[{city:"南京市"},{city:"无锡市"},{city:"苏州市"}];
for(var item in citys){
vm.items3.push( citys[item]);
}
}
function recordSelect3(event){
var content=event.target.text;
vm.title3=content;
}
</script>
请按顺序依次加载所需库文件。
