1、资源
参考 JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错
bootstrap select resources.zip下载
2、代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<title>bootstrap select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="0"/>
<link th:href="@{/js/plugins/bootstrap-3.4.1-dist/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/js/plugins/bootstrap-select-1.13.14/dist/css/bootstrap-select.css}" rel="stylesheet"/>
<style type="text/css">
.left {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="top-right left">
<div class="left" style=" 100%;height: 100%;">
<div class="left" style=" 25%;height: 100%;margin-top: 2%;">
<div class="col-sm-10">
<select id="pro" class="selectpicker" data-width="70px">
<option value="实时">实时</option>
<option value="详细">详细</option>
<option value="统计">统计</option>
</select>
</div>
</div>
<div class="left" style=" 60%;height: 100%;margin-top: 2%;">
<div class="col-sm-10">
<select id="city" class="selectpicker" data-width="180px" title="请选择">
<option value="AA1">AA1</option>
<option value="AA2">AA2</option>
<option value="AA3">AA3</option>
</select>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js}"></script>
<script type="text/javascript">
$('document').ready(function () {
setProvince();
})
var datas = [{
pro: "实时",
citys: ["AA1", "AA2", "AA3"]
}, {
pro: "详细",
citys: ["BB1", "BB2", "BB3"]
}, {
pro: "统计",
citys: ["CC1", "CC2"]
}];
function setProvince() {
setCity();
cityChange();
$('#pro').on('changed.bs.select', function (e) {
setCity();
localStorage.setItem("pro", $("#pro").val());
});
var pro = localStorage.getItem("pro");
if (pro != null) {
$('#pro').selectpicker('val', pro);
}
var cityName = localStorage.getItem("cityName");
$('#city').next().find(".filter-option-inner-inner").text(cityName);
}
function setCity() {
$("#city option").remove();
var datas_citys = []; //存放选择省份对应的城市
//获取当前选择的省份
var pro = $("#pro").val(); /*p的值是下拉列表框选择的城市 */
for (var i in datas) {
if (datas[i].pro == pro) {
datas_citys = datas[i].citys;
break; /*跳出循环，节省效率 */
}
}
//根据datas_citys数组的内容
/*2 把城市封装到option 把option添加到城市的select */
for (var i in datas_citys) {
var op = $("<option value='" + i + "'>" + datas_citys[i] + "</option>")
$("#city").append(op);
}
//插件原因 需重绘UI
$('#city').selectpicker('refresh');
// var proStorage = localStorage.getItem("pro");
// if (proStorage == pro) {
// var city = localStorage.getItem("city");
// if (city >= 0) {
// // var cityName = localStorage.getItem("cityName");
// // $('#city').attr('title', cityName);
// }
// } else {
// // $('#city').attr('title', cityName);
// }
}
function cityChange() {
$('#city').on('changed.bs.select', function (e) {
var city = $("#city").val();
localStorage.setItem("city", city);
var cityName = $('#city option:selected').text();
localStorage.setItem("cityName", cityName);
var url = getUrlBySelectName(cityName);
console.log("url", url)
// location.href = url;
});
}
function getUrlBySelectName(selectName) {
var url = "/tcc/front/ScraperRealtime";
switch (selectName) {
case "AA1":
url = "/tcc/front/PickupRealtime";
break;
case "AA2":
url = "/tcc/front/ScraperRealtime";
break;
case "AA3":
url = "/tcc/front/CoalControl";
break;
case "BB1":
url = "/tcc/front/PickupDetail";
break;
case "BB2":
url = "/tcc/front/ScraperDetail";
break;
case "BB3":
url = "/tcc/front/PIDDetail";
break;
case "CC1":
url = "/tcc/front/PickupStatis";
break;
case "CC2":
url = "/tcc/front/ScraperStatis";
break;
}
return url;
}
</script>
</body>
</html>