select标签无法渲染，form.render()即使渲染成功也无法选择？

问题描述：

        1.form.render()同样的手法，第二次没用了？点击select没有反应？

        2.form.render()渲染成功，无法选择select下的option？

问题1：form.render()渲染失败

此页面用到两个select，第一个墓园select成功渲染，第二个墓型失败。

<div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">墓园</label>
                    <div class="layui-input-block" id="FTomb">
                      
                      <select  lay-filter="FTomb" lay-search="" name="FTomb">
                        <option value="0">请选择</option>
                      </select>
                    
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">墓型</label>
                    <div class="layui-input-block" id="FTombType">

                      <select lay-filter="FTombType" lay-search="" name="FTombType">
                        <option value="0">请选择</option>
                      </select>

                    </div>
                </div>
            </div>
</div>

由于第二个select是和第一个联动的，需要第一个选择完才能有数据。

墓园需要在页面加载时就渲染完成，所以墓园这里用的post，用户选择完墓园后，再点击墓型进行选择：

$.post('Tomb_tombList',{where:"",page:"1",limit:"50",name:'tombList'},function(ms){
			json=JSON.parse(ms)
      var select = document.getElementsByName("FTomb")[0]
        for (var j = 0; j < json.count; j++) {
          if(j > 0){
            if(json.data[j].FTombName == json.data[j-1].FTombName){
              continue
            }
          }
				select.innerHTML += '<option value="'+json.data[j].FID+'">'+json.data[j].FTombName+'</option>'; 
				}
        form.render('select');//菜单渲染
		})

$('#FTombType').click(function(){
          // layer.alert("点击")
          var value = document.getElementsByClassName("layui-anim")[0].getElementsByClassName("layui-this")[0].outerText
          var select2 = document.getElementById("FTombType")
          select2.innerHTML = '<option value="0">请选择</option>';
          if(value == "请选择"){
            layer.alert("请先选择墓园")
          }else{
            for (var j = 0; j < json.count; j++) {
              if(json.data[j].FTombName == value){
                select2.innerHTML += '<option value="'+json.data[j].FTombType+'">'+json.data[j].FTombType+'</option>'; 
              }
            }
            form.render('select');
          }
        })

可以看到这里墓园是渲染成功的： 

但是点击墓型却没反应：

console.log(select2)输出select元素发现是已经添加进去的，但是没有渲染：

解决办法：

        layui的form元素本身已存在点击事件，也可能需要用layui指定的方式设置：form.on('xxxt(xxx)，function(){}).

        修改后是渲染成功的，但是需要特定手段，详见问题2

但是这里诞生了第二个问题。

问题2：无法选择select下的option

选择墓园后，点击墓型，理应在select刷新三条数据，但是却没有数据刷新，检查页面代码后发现，数据已经插入代码，却没有在前台显示？

检查浏览器页面代码同样是有数据的：

检查表单后发现给select添加点击事件也不会触发 

form.on('select(FTombType)',function(data){
      layer.alert("请先选择墓园")
      return false;
    })

需要点击select下的option“请选择”才会触发点击事件：

然而，即便点击了option，也无法进行后续选择，select只能选中第一个option，不能更换。

这里我已经选择了双人墓，但是select仍是第一个option“请选择”：

test001-CSDN直播

我想破脑袋也没想明白这是怎么回事，为什么选择不起作用呢？直到我出去撒了泡尿回来。

到座位上瞬间茅塞顿开：

form.on('select(FTombType)',function(data){})绑定的不是select，而是她下面的option！

于是转换思路，将墓型绑定的事件换绑给墓园，用户在选择完墓园后，就会渲染墓型的select。果然成功了，效果如下：