layUI 动态获取联合下拉，及清空下拉

layUI 动态获取联合下拉，及清空下拉

一、下拉空定义
<form action="" class="layui-form" id="form_data"
            lay-filter="testDate">
            <div class="form_select width30">
                <h1>洲际名称：</h1>
                <select id="continentName" name="continentName"
                    lay-filter="continentName"></select>
            </div>
            <div class="form_select width30">
                <h1>国家名称：</h1>
                <select lay-filter="countriesName" id="countriesName"
                    name="countriesName">
                </select>
            </div>
        </form>

 二、change值改变时自动加载
form.on('select(continentName)', function(data){ //监听change值改变时加载下面刷新方法
            form.render('select');
            var id=$('#continentName').val();//获取选中下拉的value值，我这value值放的是id
             treeSele(id);//根据下来只改变的值去加载查询方法
             queryDropCountries(id);//根据第一个下拉选中值条件去加载下一个下拉的下拉内容
            });
         form.on('select(countriesName)', function(data){ 
            form.render('select');
            var id=$('#countriesName').val();
             treeSele(id);
             
            });
         
         queryDropCountries(id);
         function queryDropCountries(id){//根据第一个change选中的id进行下一个下拉值查询
             console.info("前台输出值="+id);
                $.ajax({
                      url: '${ctx}GtCity/queryDropCountries.html?pId='+id,
                      type: 'post',
                      dataType: 'json',
                      success: function(data){
                          var continentOption;
                          $.each(data, function(idx, obj) {//遍历下拉查询返回值，并拼接到下拉框内
                              continentOption += "<option value=\"" + obj.value + "\" >" + obj.name + "</option>";
                        });
                        $("#countriesName").empty();//清空上一个查询下拉值
                        $("#countriesName").append(continentOption);
                        form.render();  //重新渲染form表单  否则动态option不生效
                      },
                      error: function(data){
                          layer.msg('加载下拉列表失败!',{
                            icon: 0,time: 1000
                        });
                      }
                  });
            }         
         queryDropDown();//获取第一个下拉内容方法
         function queryDropDown(){
                $.ajax({
                      url: '${ctx}GtCity/queryDropDown.html',
                      type: 'post',
                      dataType: 'json',
                      success: function(data){
                          var continentOption;
                          $.each(data, function(idx, obj) {
                              continentOption += "<option value=\"" + obj.value + "\" >" + obj.name + "</option>";
                        });
                        $("#continentName").append(continentOption);
                        form.render();  //重新渲染form表单  否则动态option不生效
                      },
                      error: function(data){
                          layer.msg('加载下拉列表失败!',{
                            icon: 0,time: 1000
                        });
                      }
                  });
            }         

 三XML查询
select continent_name as name,id as value         
        from 
        gt_continent
返回一个name、一个value值，下拉会进行获取，也可根据需求返回其他值

 四、参考界面