我想做的功能是,先从数据库中查询出来城市名称,以json格式传递给前端,前端使用input下拉框,接收数据,并在下拉框中显示。注意,前端传送的json数据格式是固定的,保存的城市格式是List<map>,map中有两个值,一个key为id,value为自定义的id(从0开始自增),另一个key为text,value为城市名称。这样写主要是为了跟前台下拉框对应。
前端代码:
<td> 选择城市:
<input type="text" id="city_name" name="city_name" class="easyui-combobox" data-options="editable:true ,valueField: 'id',textField: 'text',url:'${pageContext.request.contextPath}/admin/main/getcity',prompt: '城市名称',validType:'length[0,100]' "/>
</td>
然后就需要获取这个点击事件了。
$(function(){
$("#city_name").combobox({
onSelect:function(record){
var cit=$("#city_name").combobox('getText');
$.ajax({
type:"POST",
url:'${pageContext.request.contextPath}/admin/main/getCityst',
dataType:"json",
data:{
"city":cit
},
success:function(json){
$("#version").text(json.version);
$("#lianjie").text(json.cstatus);
$("#qiantai").text(json.qstatus);
$("#xyzsl").text(json.alls);
$("#wljsl").text(json.noda);
}
})
}
})
根据id获取下拉框,然后onSelect获取选中的下拉框栏目,然后就可以获取到选中的城市了。根据id,使用combobox,getText获取城市名称,然后根据该城市名称去执行前台ajax,得到该城市下其他数据。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/17449.html