前端-js實現省市區三級聯動下拉選擇框


1、下載省市區js文件 ;

 省市區js文件下載

 

 

 

2、創建html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市區列表</title>
    <!-- 導入三個js文件-->
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/distpicker.data.js"></script>
    <script type="text/javascript" src="../js/distpicker.js"></script>
</head>
<body>

<div data-toggle="distpicker">

     <div>
         <select id="province" name="province" data-province="---- 選擇省 ----"></select>
     </div>

     <div>
         <select id="city" name="city" data-city="---- 選擇市 ----"></select>
     </div>

     <div>
         <select id="area" name="area" data-district="---- 選擇區 ----"></select>
     </div>

</div>

</body>
</html

 

 3、效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM