页面"/>
使用distpicker的简单测试页面
引入vue.js和distPicker.js，jquery.js即可在控制台动态获取当前所选的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title><script src=".1.4/jquery.min.js"></script><script src="vue-2.5.16.min.js"></script><script src="distpicker.data.js"></script><script src="distpicker.js"></script><script>var app = new Vue({el: "#app",data:{provinceTest:"test"},methods:{findAll : function(){let province = $("#province").val();//获取省，如：北京市let city = $("#city").val();//获取市，如：北京城区let district = $("#district").val();//获取区，如：东城区console.log(province);console.log(city);console.log(district);},checkYes : function(){var divV = document.getElementById("hideOrview");divV.style.display = "block";},checkNo : function(){var divV = document.getElementById("hideOrview");divV.style.display = "none";},},});$("#distpicker").distpicker('destroy');$("#distpicker").distpicker({autoSelect: true,placeholder: false});</script>
</head>
<body>
<div id="app"><div id="hideOrview" style="display: block"><div data-toggle="distpicker" id="distpicker"><select data-province="选择省" id="province"></select><select data-city="选择市" id="city"></select><select data-district="选择区/县" id="district"></select></div><div><button onclick="app.findAll()" style="text-align:center">按钮</button></div></div><div><input type="radio" id="contactChoice1" name="1" checked="checked" onclick="app.checkNo()"><label for="contactChoice1">网络会议</label><input type="radio" id="contactChoice2" name="1" checked="checked" onclick="app.checkYes()"><label for="contactChoice1">线下面基</label></div></div></body>
</html>
更多推荐
使用distpicker的简单测试页面
发布评论