基於city-picker的省市區三級聯動列表

本文轉載自查看原文 2018-03-01 19:55 5807 前端技術

網址： http://tshi0912.github.io/city-picker/

下載： city-picker-master.zip

復制 dist 下內容，到項目下就可以使用

引入4個文件

有html和js倆種用法

1、HTML

2、JS

清除 city picker 選中內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript" src="js/city-picker.data.js" ></script>
        <script type="text/javascript" src="js/city-picker.js" ></script>
        <link rel="stylesheet" href="css/city-picker.css" />
        
        <title>JS用法</title>
        <script>
            $(function(){
                $("#area").citypicker();
                $("#reset").click(function(){
                    $("#area").citypicker('reset');
                })
            })
            
        </script>
    </head>
    <body>
        <div  style ="position:relative;">  
          <input id="area"  type ='text' style ="width:50%;">
          <input type="button" id="reset" value="重置"/>
        </ div>
    </body>
</html>

效果圖:

動態賦值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript" src="js/city-picker.data.js" ></script>
        <script type="text/javascript" src="js/city-picker.js" ></script>
        <link rel="stylesheet" href="css/city-picker.css" />
        
        <title>動態賦值</title>
        <script type="text/javascript">
            $(function(){
                $("#area").citypicker();
                $("#setBtn").click(function(){
                    //賦值錢，必須先執行reset、destory
                     $("#area").citypicker('reset');
                       $("#area").citypicker('destroy');
                     $("#area").citypicker({
                      province: '江蘇省',
                      city: '常州市',
                      district: '溧陽市'
                    });
                })
            })
            
        </script>
    </head>
    <body>
        <div  style ="position:relative;">  
          <input id="area"  type ='text' style ="width:50%;">
          <input type="button" id="setBtn" value="賦值"/>
        </ div>
    </body>
</html>

免責聲明！

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

猜您在找 省市區列表三級聯動查詢省市區三級聯動省市區三級聯動用mint-ui picker組件實現省市區三級聯動省市區三級聯動picker-view-微信小程序省市區級聯（三級聯動） city-picker插件使用-移動h5三級聯動 element 省市區三級聯動遞歸-實現省市區三級聯動用jsp實現省市區三級聯動下拉