新增多级联动下拉示例

ruoyi-admin/src/main/resources/templates/demo/table/search.html

@@ -62,6 +62,29 @@
 				</form>
 			</div>
 			
+			<div class="col-sm-12 search-collapse">
+			    <p class="select-title">多级联动下拉查询</p>
+				<form id="select-form">
+					<div class="select-list">
+						<ul id="element">
+						    <li>
+								商户编号：<input type="text" name="userId"/>
+							</li>
+							<li>
+								充值类型：<select class="type"></select>
+							</li>
+							<li>
+								充值路由：<select class="router"></select>
+							</li>
+							<li>
+								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('select-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+							</li>
+						</ul>
+					</div>
+				</form>
+			</div>
+			
 			<div class="col-sm-12 search-collapse">
 			    <p class="select-title">下拉多选条件查询</p>
 				<form id="select-form">
@@ -164,5 +187,16 @@
 	</div>
 	<th:block th:include="include :: footer" />
 	<th:block th:include="include :: bootstrap-select-js" />
+	<th:block th:include="include :: cxselect-js" />
+	
+	<script th:inline="javascript">
+	    // 直接返回获取
+   		var data = [{"v":"taobao","n":"淘宝","s":[{"v":"tm","n":"天猫"},{"v":"jhs","n":"聚划算"}]},{"v":"jd","n":"京东","s":[{"v":"jdcs","n":"京东超市"},{"v":"jdsx","n":"京东生鲜"}]}];
+    	$('#element').cxSelect({
+    	  selects: ['type', 'router'],
+    	  jsonValue: 'v',
+    	  data: data
+    	});
+    </script>
 </body>
 </html>