需求: 需要通过二级联动的方式将二级列表数据展示出来
一级列表选择 (注意要给 id 赋值用于定位)
- <div class="control-group">
- <label class="control-label"> 评分:</label>
- <div class="controls">
- <form:select id="type" path="score" htmlEscape="false" style="width:270px;" class="required">
- <form:option value="">----select----</form:option>
- <form:options items="${scoreList}" itemLabel="label" itemValue="id" />
- </form:select>
- <span class="help-inline"><font color="red">*</font> </span>
- </div>
- </div>
二级输入框联动展示 (注意要给 id 赋值)
- <div class="control-group">
- <label class="control-label"> 评分准则:</label>
- <div class="controls">
- <form:input id="subType" path="scoreCriteria" htmlEscape="false" style="width:260px;" maxlength="125" class="required"/>
- <span class="help-inline"><font color="red">*</font> </span>
- </div>
- </div>
JavaScript 方法 (一级列表变化将会调用该方法)
- <script type="text/javascript">
- $("#type").on("change",function(){
- $.Ajax({
- url:"${ctx}/oc/devopsscore/selectSec",// 根据传的 id 值请求子类型的地址.,
- data:"id="+this.value,
- type:"post",
- dataType:"json",
- success:function(result){
- $("#subType").val(result["description"]);
- }
- })
- });
- </script>
JavaScript 方法 (一级列表变化将会调用该方法) 这种方法是将传入的数据转换成选择框的形式的显示方式
- $("#type").on("change",function(){
- $.Ajax({
- url:"${ctx}/delivery/platform/selectSub",// 根据传的 type 值请求子类型的地址.,
- data:"type="+this.value,
- type:"post",
- dataType:"json",
- success:function(result){
- $("#subType").HTML("");
- var option1 = $("<option></option>").val("").text("--select--");
- $("#subType").append(option1);
- for(var i=0;i<result.length;i++) {
- var option = $("<option></option>").val(result[i]).text(result[i]);
- $("#subType").append(option);
- }
- }
- })
- });
JavaScript 方法 (一级列表变化将会调用该方法) 这种方法是将传入的数据直接在输入框中显示出
- <script type="text/javascript">
- $("#type").on("change",function(){
- $.Ajax({
- url:"${ctx}/oc/devopsscore/selectSec",// 根据传的 type 值请求子类型的地址.,
- data:"value="+this.value,
- type:"post",
- dataType:"json",
- success:function(result){
- $("#subType").val(result["description"]);
- }
- })
- });
- </script>
后台方法 (@responsebody https://github.com/responsebody 不能忘记加上, 不然 Ajax 无法执行 success:function(result))
- @RequestMapping(value = "selectSec")
- @ResponseBody
- public String selectSec(OcDict ocDict, RedirectAttributes redirectAttributes) {
- System.err.println("ocDict"+JsonMapper.toJsonString(ocDict));
- ocDict=ocDictService.get(ocDict);
- return JsonMapper.toJsonString(ocDict);
- }
将 JSON 转换成 list
- JavaType javaType = JsonMapper.getInstance().createCollectionType(ArrayList.class, DpmProblemReviewInfo.class);
- List<DpmProblemReviewInfo> objectListData = JsonMapper.getInstance().fromJson(changeData,javaType);
来源: http://www.bubuko.com/infodetail-2894206.html