furao
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A simple jQuery plugin for picking provinces, cities and districts of China.">
  <meta name="keywords" content="中国, 省份, 城市, 行政区, 省市区, 三级联动, 地址选择器, HTML, CSS, JS, JavaScript, jQuery plugin, province, city, district, pick, picker, picking, front-end, frontend, web development">
  <meta name="author" content="Chen Fengyuan">
  <title>Distpicker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/highlightjs@9.10.0/styles/github.css">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <!--[if lt IE 9]>
  <div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
  </div>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-light navbar-expand-md">
    <div class="container">
      <a class="navbar-brand" href="./">Distpicker</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <nav class="nav navbar-nav">
          <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/blob/master/README.md" data-toggle="tooltip" title="View the documentation">Docs</a>
          <a class="nav-link" href="https://github.com/fengyuanchen/distpicker" data-toggle="tooltip" title="View the GitHub project">GitHub</a>
          <a class="nav-link" href="https://fengyuanchen.github.io" data-toggle="tooltip" title="More projects">More</a>
          <a class="nav-link" href="https://chenfengyuan.com" data-toggle="tooltip" title="About the author">About</a>
        </nav>
      </div>
    </nav>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron bg-primary text-white rounded-0">
    <div class="container">
      <div class="row">
        <div class="col-md col-lg-8">
          <h1>Distpicker <small class="h6">v2.0.5</small></h1>
          <p class="lead">A simple jQuery plugin for picking provinces, cities and districts of China.</p>
        </div>
        <div class="col-md col-lg-4">
          <div class="carbonads">
            <script id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <div class="alert alert-warning">请注意以下市/县并未设置下一级的区/乡/镇：济源市、潜江市、神农架林区、天门市、仙桃市、东莞市、中山市、东沙群岛、白沙黎族自治县、保亭黎族苗族自治县、昌江黎族自治县、澄迈县、儋州市、定安县、东方市、乐东黎族自治县、临高县、陵水黎族自治县、琼海市、琼中黎族苗族自治县、屯昌县、万宁市、文昌市、五指山市、嘉峪关市、阿拉尔市、北屯市、可克达拉市、昆玉市、石河子市、双河市、铁门关市、图木舒克市、五家渠市。</div>

    <!-- Getting started -->
    <h2 id="getting-started">Getting started</h2>
    <hr>
    <h3>Installation</h3>
    <p>Include files:</p>
    <pre><code class="language-html">&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;&lt;!-- jQuery is required --&gt;
&lt;script src=&quot;/path/to/distpicker.js&quot;&gt;&lt;/script&gt;</code></pre>

    <p>Create HTML elements:</p>
    <pre><code class="language-html">&lt;div&gt;&lt;!-- container --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- province --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- city --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- district --&gt;
&lt;/div&gt;</code></pre>

    <h3>Initialize by <code>data-toggle=&quot;distpicker&quot;</code> attribute</h3>
    <h4>Basic</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom placeholders</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select data-province=&quot;---- 选择省 ----&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;---- 选择市 ----&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;---- 选择区 ----&quot;&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control" data-province="---- 选择省 ----"></select>
        <select class="form-control" data-city="---- 选择市 ----"></select>
        <select class="form-control" data-district="---- 选择区 ----"></select>
      </div>
    </form>
    <h4>Custom districts</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select data-province=&quot;浙江省&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;杭州市&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;西湖区&quot;&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control" data-province="浙江省"></select>
        <select class="form-control" data-city="杭州市"></select>
        <select class="form-control" data-district="西湖区"></select>
      </div>
    </form>

    <h3>Initialize by <code>$.fn.distpicker</code> method</h3>
    <h4>Basic</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker1&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker1&quot;).distpicker();</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker1">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom placeholders</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker2&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker2&quot;).distpicker({
  province: '---- 所在省 ----',
  city: '---- 所在市 ----',
  district: '---- 所在区 ----'
});</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker2">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom districts</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker3&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker3&quot;).distpicker({
  province: '浙江省',
  city: '杭州市',
  district: '西湖区'
});</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker3">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <!-- Options -->
    <h2>Options</h2>
    <hr>
    <p>Supports to set the options by <code>data-*</code> attributes:</p>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;3&quot; data-province=&quot;浙江省&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="3" data-province="浙江省">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <!-- Methods -->
    <h2>Methods</h2>
    <hr>
    <p>You can call methods by <code>$().distpicker('method', arg1, arg2, ..., argN)</code>.</p>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker&quot;).distpicker({
  province: '福建省',
  city: '厦门市',
  district: '思明区'
});</code></pre>
    <p>Demo:</p>
    <div class="docs-methods mt-2 mb-4">
      <form class="form-inline mb-2">
        <div id="distpicker">
          <select class="form-control"></select>
          <select class="form-control"></select>
          <select class="form-control"></select>
        </div>
      </form>
      <div>
        <button class="btn btn-primary" id="reset" type="button">Reset</button>
        <button class="btn btn-warning" id="reset-deep" type="button">Reset (deep)</button>
        <button class="btn btn-danger" id="destroy" type="button">Destroy</button>
      </div>
    </div>

    <!-- Examples -->
    <h2>Examples</h2>
    <hr>
    <h3>Only province and city</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Only province</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>

    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select province automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;1&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="1">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select province and city automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;2&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="2">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select all districts automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;3&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="3">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Without placeholders</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-placeholder=&quot;false&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-placeholder="false">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Administrative code as value</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-value-type=&quot;code&quot;&gt;
  &lt;select data-province=&quot;330000&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;330100&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;330106&quot;&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-value-type="code">
        <select class="form-control" data-province="330000"></select>
        <select class="form-control" data-city="330100"></select>
        <select class="form-control" data-district="330106"></select>
      </div>
    </form>
  </div>

  <!-- Footer -->
  <footer class="docs-footer">
    <div class="container">
      <p class="heart"></p>
      <nav class="nav flex-wrap justify-content-center mb-3">
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker">GitHub</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/releases">Releases</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/issues">Issues</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/blob/master/LICENSE">License</a>
        <a class="nav-link" href="https://chenfengyuan.com">About</a>
      </nav>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/highlightjs@9.10.0/highlight.pack.js"></script>
  <script src="https://fengyuanchen.github.io/js/common.js"></script>
  <script src="js/distpicker.js"></script>
  <script src="js/main.js"></script>
</body>
</html>