用Thymeleaf 这个模板渲染，怎么通过select下拉框选中的值，去控制另一个复选框标签，展示不同的复选框选项

用Thymeleaf 这个模板渲染，怎么通过select下拉框选中的值，去控制另一个复选框标签，展示不同的复选框选项，实现如下

效果图

解决方法

这个是下拉框

<div class="col-md-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">国家/地区：</label>
                        <div class="col-sm-8">
                            <select name="idZone" onchange="selectCountryIdZone(this.options[this.options.selectedIndex].value,true)" class="form-control" th:with="type=${@dict.getType('countryList')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{idZone}"></option>
                            </select>
                        </div>
                    </div>
                </div>

这个是复选框

<div id="logisticsMethodsId" class="col-md-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">物流方式：</label>
                        <div id="HKId" style="display: none;" class="col-sm-8" th:with="type=${@dict.getType('cms_logistics_methods')}">
                            <label th:each="dict : ${type}" class="check-box" th:if="${dict.remark =='3'} ">
                                <input name="logisticsMethods"  type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"  th:attr="checked=${product.logisticsMethods != null ? (product.logisticsMethods.contains(dict.dictValue)?true:false) : false}" >
                            </label>
                        </div>
                        <div id="TWId" style="display: none;" class="col-sm-8" th:with="type=${@dict.getType('cms_logistics_methods')}">
                            <label th:each="dict : ${type}" class="check-box" th:if="${dict.remark =='2'} ">
                                <input name="logisticsMethods"  type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"  th:attr="checked=${product.logisticsMethods != null ? (product.logisticsMethods.contains(dict.dictValue)?true:false) : false}" >
                            </label>
                        </div>
                    </div>
                </div>

这个是通过js来控制显示和隐藏

function selectCountryIdZone(val,flag) {
            if(flag){
                $("input[name='logisticsMethods']").each(function(){
                    $("input[name='logisticsMethods']").iCheck('uncheck');
                });
            }

            //香港
            if("3"==val){
                $("#logisticsMethodsId").show();
                $("#HKId").show();
                $("#TWId").hide();
            }else if("2"==val){
                //台湾
                $("#logisticsMethodsId").show();
                $("#HKId").hide();
                $("#TWId").show();
            }else {
                //其他
                $("#logisticsMethodsId").hide();
            }
        }

注意点

正确写法是：

 th:attr="checked=${product.logisticsMethods != null ? (product.logisticsMethods.contains(dict.dictValue)?true:false) : false}"

这里获取后台的参数logisticsMethods为空时，不能这么写，会有500错误，写法如下：

 th:attr="checked=${product.logisticsMethods.contains(dict.dictValue)?true:false}"

上面就是通过控制select的值来实现复选框展示不同的值，前提是已经分好类别了
，如以下字典图

好了，就这样，希望帮助到网友