perf demo

demo/json/area.json

@@ -0,0 +1 @@
+{"state":"success","data":{"list":[{"value":3101,"name":"上城区"},{"value":3102,"name":"下城区"}]}}

demo/json/city.json

@@ -0,0 +1 @@
+{"state":"success","data":[{"value":301,"name":"杭州市"},{"value":302,"name":"宁波市"}]}

demo/json/province.json

@@ -0,0 +1 @@
+[{"value":1,"name":"北京市"},{"value":2,"name":"上海市"},{"value":3,"name":"浙江省"}]

demo/oneself.html

@@ -23,6 +23,16 @@ <h2>各选项数据独立</h2>
 
     <blockquote>当每个选项使用各自的接口获取数据时，每次更改选择都会触发一次请求，请求时会传递已选择的值。<br>适合整合后的数据非常大、无法整合、以及未对数据整合的情况下使用。</blockquote>
 
+    <fieldset id="self_data">
+      <legend>选择器组</legend>
+      <section>
+        <select class="province select" name="province" data-url="json/province.json"></select>
+        <select class="city select" name="city" data-url="json/city.json" data-json-space="data"></select>
+        <select class="area select" name="area" data-url="json/area.json" data-json-space="data.list"></select>
+      </section>
+      <section>
+    </fieldset>
+
 <p>配置示例</p>
 <pre>
 &lt;select class="province" name="province" data-url="province.php"&gt;&lt;/select&gt;
@@ -64,5 +74,18 @@ <h2>各选项数据独立</h2>
   </div>
 </div>
 
+<!-- <script src="//cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script> -->
+<script src="//cdn.staticfile.org/zepto/1.0/zepto.min.js"></script>
+<script src="../js/jquery.cxselect.js"></script>
+<script>
+(function() {
+  // 默认
+  $('#self_data').cxSelect({
+    selects: ['province', 'city', 'area'],
+    jsonName: 'name',
+    jsonValue: 'value',
+  });
+})();
+</script>
 </body>
 </html>