前端使用(ThymeleafJava模板引擎)来写下拉框联动效果

前端使用的bootstrap框架和一些插件组合,利用ThymeleafJava模板引擎来渲染

HTMl代码
          <div class="form-group">
                <label class="col-sm-2 control-label"><span style="color: red">*</span>抽检单位：</label>
                <div class="col-sm-10" style="padding:0 25px ">
                    <select name="checkOrgId" class="form-control" id="start_select1" style="width: 520px;">
                        <option selected hidden disabled value="">选择抽检单位</option>
                        <option th:each="checkitem:${tlCheckOrgList}" th:value="${checkitem.organizationId}"
                                th:text="${checkitem.organizationName}">
                        </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"><span style="color: red">*</span>抽检地址：</label>
                <div class="col-sm-10" style="padding:0 25px ">
                    <select name="addressId" class="form-control" id="start_select2" style="width: 520px;">
                        <option selected hidden disabled value="">请选择抽检单位收获地址</option>
                        <!--<option th:each="checkadress:${tlCheckOrgAddressList}" th:value="${checkadress.addressId}"-->
                        <!--th:text="${checkadress.address}">-->
                        <!--</option>-->
                    </select>
                </div>
            </div>

Javascript代码
//下拉框联动效果
        $("#start_select1").change(function () {   //通过单位绑定change(改变事件)
            var unitId = $("#start_select1").val(); //获取单位的值
            if (unitId == "") {   //如果为空就返回出去不在执行
                return;
            }
            $.ajax({
                cache:true,
                url: prefixOrg + "/List",
                async: false,
                type: "POST",
                // dataType:"JSON",
                data: {"organizationId": unitId}, //单位作为id发送过去,通过单位的主键来获取到地址对应内容
                success: function (data) {
                    console.log(data.rows);
                     var siteId = $("#start_select2").empty(); // 获取地址的元素并且将select的值清空
                    for (var i = 0; i < data.rows.length; i++) { //将获取到的数据进行循环遍历
                        siteId.append("<option value='" + data.rows[i].addressId + "'>" + data.rows[i].address + "</option>");  //将数据插入到地址下拉框中去
                    }
                },error:function(){
                    layer.msg("获取数据失败,请重新刷新!");
                }
            })
        });