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();
   }
  })
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值