springMvc Jsp下拉框(select)級聯
阿新 • • 發佈:2019-02-19
jsp頁面資訊:
<form action="corp_cost/save.do" name="Form" id="Form" method="post">
<tr>
<td style="width:70px;text-align: right;padding-top: 13px;">資費型別:</td>
<td>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio1" type="radio" value="1" checked="checked"><span class="lbl">包時長</span></label>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio2" type="radio" value="2"><span class="lbl">套餐</span></label>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio3" type="radio" value="3"><span class="lbl">計時</span></label>
</td>
</tr>
<tr>
<td style="width:70px;text-align: right;padding-top: 13px;">資費名稱:</td>
<td>
<select class="costId_chzn_o_1"
name="costId" id="cost_all" data-placeholder="請選擇資費"
style="vertical-align:top;width: 180px;"
>
<option value=""></option>
<option value="">全部</option>
</select>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="10">
<a class="btn btn-mini btn-primary" onclick="save();">儲存</a>
<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function() {
//頁面初始化時級聯預設資訊
getCosts();
//單選按鈕觸發時級聯資訊
$('input:radio[name="form-field-radio"]').change(function(){
getCosts();
});
});
function getCosts(){
var costType = $('input:radio[name="form-field-radio"]:checked').val();
$.ajax({
type: "POST",
url: '<%=basePath%>corp_cost/getCosts.do',
data: {cost_type: costType},
dataType:'json',
beforeSend: function(){
//級聯資訊時首先清空下拉框資訊
$(".costId_chzn_o_1").html('請選擇');
},
success: function(data){
var str = '<option value="">請選擇</option>';
for(var o in data){
str += "<option>"+data[o].name+ "</option>";
}
$(".costId_chzn_o_1").append(str);
}
});
}
</script>
controller類程式碼
@ResponseBody
@RequestMapping(value="/getCosts" , produces = {"application/json;charset=UTF-8"})
public String getCosts() throws Exception{
List<Map> costs = costService.listAll(pd); //這裡返回list物件,map中包含key=name
return JSONObject.toJSONString(costs);
}
<form action="corp_cost/save.do" name="Form" id="Form" method="post">
<tr>
<td style="width:70px;text-align: right;padding-top: 13px;">資費型別:</td>
<td>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio1" type="radio" value="1" checked="checked"><span class="lbl">包時長</span></label>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio2" type="radio" value="2"><span class="lbl">套餐</span></label>
<label style="float:left;padding-left: 10px;"><input name="form-field-radio" id="form-field-radio3" type="radio" value="3"><span class="lbl">計時</span></label>
</td>
</tr>
<tr>
<td style="width:70px;text-align: right;padding-top: 13px;">資費名稱:</td>
<td>
<select class="costId_chzn_o_1"
name="costId" id="cost_all" data-placeholder="請選擇資費"
style="vertical-align:top;width: 180px;"
>
<option value=""></option>
<option value="">全部</option>
</select>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="10">
<a class="btn btn-mini btn-primary" onclick="save();">儲存</a>
<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function() {
//頁面初始化時級聯預設資訊
getCosts();
//單選按鈕觸發時級聯資訊
$('input:radio[name="form-field-radio"]').change(function(){
getCosts();
});
});
function getCosts(){
var costType = $('input:radio[name="form-field-radio"]:checked').val();
$.ajax({
type: "POST",
url: '<%=basePath%>corp_cost/getCosts.do',
data: {cost_type: costType},
dataType:'json',
beforeSend: function(){
//級聯資訊時首先清空下拉框資訊
$(".costId_chzn_o_1").html('請選擇');
},
success: function(data){
var str = '<option value="">請選擇</option>';
for(var o in data){
str += "<option>"+data[o].name+ "</option>";
}
$(".costId_chzn_o_1").append(str);
}
});
}
</script>
controller類程式碼
@ResponseBody
@RequestMapping(value="/getCosts" , produces = {"application/json;charset=UTF-8"})
public String getCosts() throws Exception{
List<Map> costs = costService.listAll(pd); //這裡返回list物件,map中包含key=name
return JSONObject.toJSONString(costs);
}