layui聯動下拉選的封裝

<div class="layui-inline">
      <label class="layui-form-label">場 站:</label>
      <div class="layui-input-inline">
       <select class="selectpicker" id="slpk"  data-live-search="true" style="width:200px;height:500px"
       data-selected-text-format="count" data-live-search-placeholder="搜索" 
       multiple data-max-options="1" name="請選擇地區" th:field="*{objId}"  onchange="change(this)"></select>
       <input type="hidden" id="hiddenName" th:field="*{name}">
      </div>
</div>
     
<div class="layui-inline">
      <label class="layui-form-label">氣象站:</label>
      <div class="layui-input-inline">
       <select class="selectpicker" id="qxz"  data-live-search="true" style="width:200px;height:500px"
       data-selected-text-format="count" data-live-search-placeholder="搜索" 
       multiple data-max-options="1" name="請選擇地區" th:field="*{sdate}"  onchange="change1()"></select>
       <input type="hidden" id="hiddenName1" th:field="*{edate}" >
     </div>
</div>
$(function() {
  $.ajax({
      crossDomain: true,
      xhrFields: {
          withCredentials: true
      }, 
      async:false,//同步執行 
     type:"post",
     url:[[@{/getSelectFarm}]],
     data:{type:2},
     datatype:"json",
     success:function(data){
   	var select = $("#slpk");
   	select.append(data.rbaseNetList);
   	var typeArr=[[${commonBean.objId}]]; //回顯
      	if(typeArr != null){
       		select.selectpicker('val', typeArr);
       		initQxz1(typeArr);
      	}
      },
      error:function(data){
      	alert("error!")
      }
    }); 
 });
 
 //場站
function change(obj){
  var options=$("#slpk option:selected"); //獲取選中的項
  $("#hiddenName").val(options.text());//拿到選中項的文本
  var id = obj.options[obj.selectedIndex].value;
  initQxz(id);
 }
 //氣象站
 function change1(){
  var options=$("#qxz option:selected"); //獲取選中的項
  $("#hiddenName1").val(options.text());//拿到選中項的文本
 }

function initQxz1(id){
  $.ajax({
   crossDomain: true,
   xhrFields: {
     withCredentials: true
   }, 
   async:false,//同步執行 
   type:"post",
   url:"/getGfqxz",
   data:{farmid:id},
   dataType:"json",
   success:function(data){
    $("#qxz").html("");//必須要先置空一下,否則回顯會失敗
    var select = $("#qxz");
    select.append(data.qxzs);
   }
  })
 }


 function initQxz(id){
  $.ajax({
   crossDomain: true,
   xhrFields: {
     withCredentials: true
   }, 
   async:false,//同步執行 
   type:"post",
   url:"/getGfqxz",
   data:{farmid:id},
   dataType:"json",
   success:function(data){
    $("#qxz").html("");
    var select = $("#qxz");
    select.append(data.qxzs);
    $("#qxz").selectpicker('refresh');//必須refresh
    change1();
   }
  })
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章