使用ajax创建ul,联合县城市,采用ajax,而使用ul模拟select下拉
接待处代码
js
//采用jquery展示鼠标放到省ul下拉显示
$("#province").hover(function(){
$("#province ul").toggle();
})
//使用jquery效果展示鼠标放到城市的ul下拉展示
$("#city").hover(function(){
$("#city ul").toggle();
})
//使用jquery效果展示鼠标放到区县的ul下拉展示
$("#area").hover(function(){
$("#area ul").toggle();
})
//改变省份触发的函数
function changePro(ele){
$("#showPro").text(ele.innerText);
$("#showCity").text("市");
$("#showArea").text("区");
$("#pid").val(ele.value);
$("#cid").val("");
$("#aid").val("");
$.ajax({
url:'getAjaxJson.action',
data:{type:'city',id:ele.value},
type:'POST',
success:function(data){
var cityList = data.list;
var ulEle = $("#cities");
ulEle.children().remove();
for(var i=0;i
ulEle.append("
"+cityList[i].city+"");
}
}
});
}
//改变城市触发的函数
function changeCity(ele){
$("#showCity").text(ele.innerText);
$("#showArea").text("区");
$("#cid").val(ele.value);
$("#aid").val("");
$.ajax({
url:'getAjaxJson.action',
data:{type:'area',id:ele.value},
type:'POST',
success:function(data){
var areaList = data.list;
var ulEle = $("#areas");
ulEle.children().remove();
for(var i=0;i
ulEle.append("
"+areaList[i].area+"");
}
}
});
}
//改变区县触发的函数
function changeArea(ele){
$("#showArea").text(ele.innerText);
$("#aid").val(ele.value);
}
html代码
省
- ${province.province}
市
区
模拟select下拉的css代码
.list_title_1{ 200px; height:50px; border:1px solid #d6d6d6; line-height:34px; text-indent:10px; font-size:14px; color:#999; cursor:pointer; margin-top:-7px;}
.list_title_1 span{ 70px; margin-left:0px;}
.list_title_1 img{ float:right; margin:15px 5px 0 0}
.list_title_1 ul{ display:none; 200px; position:absolute; border:1px solid #d6d6d6; border-bottom:none; margin-top:34px; margin-left:-1px;}
.list_title_1 ul li{ 100%; height:34px; line-height:36px; border-bottom:1px solid #d6d6d6; background:#fff; cursor:pointer}
.list_title_1 ul li:hover{ background:#43B1E8; color:#fff;}
获取城市,区县的java代码
public void getAjaxJson(){//此处使用的struts2的框架
try {
HttpServletResponse response = getResponse();
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
String type = getRequest().getParameter("type");
String id = getRequest().getParameter("id");
Map map = new HashMap();
JSONObject jo = null;
if(type!=null&&"city".equals(type)){
hql="from cities where provinceid='" + id + "'";
List list = cdao.getListObj(hql,new cities());
map.put("type", type);
map.put("list", list);
jo = JSONObject.fromObject(map);
}else if(type!=null&&"area".equals(type)){
hql="from areas where cityid='" + id + "'";
List list = cdao.getListObj(hql,new areas());
map.put("type", type);
map.put("list", list);
jo = JSONObject.fromObject(map);
}
String str = jo.toString();
out.print(str);
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
//相应stuts2的相应配置文件片段
说明 下拉的省部件放置request域内。不要把ajax内在要求
版权声明:本文博主原创文章,博客,未经同意不得转载。
使用ajax创建ul,联合县城市,采用ajax,而使用ul模拟select下拉相关推荐
- ajax多选下拉,模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...
- c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
- 记录:ajax获取数据动态生成select下拉选js部份
js代码 $(document).ready(function() {$("#role").setRoleList();//调用下面js中的方法 }); jQuery.fn.ext ...
- JavaScript实现select下拉菜单省份和城市的级联菜单
使用JavaScript中变量定义省份及对应的城市,应用select标签对象,实现二级级联的下拉菜单选中效果.即在省份下拉菜单中选中一个省份时,在城市下拉菜单中出现该省份对应的城市. HTML代码: ...
- html下拉框由后端,select下拉框通过ajax获取后台的值
我址工框按都不他移据流.果原箭近第作架量是这两天一直在写前端,修改bug,这个问题是真的搞了我一天是时间.鄙人才明白,经验缺少带来的时间分浏代刚的学过互解久点维数数请曾房总题屏断果如以气.泉公一实切式 ...
- ajax 遍历select 下拉框
html :<select id="type" > </select> js代码: <script type="text/javascr ...
- ajax验证下拉框,ajax 遍历select 下拉框(示例代码)
html : js代码: //动态绑定下拉框项 function addnotice() { $.ajax({ url: "${pageContext.request.contextPath ...
- Select下拉框结合Ajax使用
常用情况1: 员工 与 部门 一对一,但是实体类没有外键关联,员工中只记录 部门id,编辑员工信息时 部门要下拉框且默认显示员工所在部门名称(不是id) 1. <select name=&qu ...
- 下拉框选中事件ajax,LayUI中select下拉框选中触发事件
SpringMvc的数据绑定流程 在SpringMvc中会将来自web页面的请求和响应数据与controller中对应的处理方法的入参进行绑定,即数据绑定.流程如下: -1.SpringMvc主框架将 ...
最新文章
- 视频质量评价方法简介
- 使用 read_graphviz 将 GraphViz Dot 文本图加载到 BGL adjacency_list 图的简单示例
- 基于weblogic 的EJB 学习笔记-JSP教程,资料/其它
- 35修改tomcat端口
- java调用c so动态库_jni 调用C动态库dll/so
- matlab 过度曝光,MATLAB:补偿图像处理中的过度曝光/过饱和度
- Zookeeper中的ACL
- 记录下ES6踩过的坑
- windows进程中的内存结构
- debian-nagios3.2,linux+apache+mysql+php
- idea 安装uml 画图工具
- ADS学习记录--元器件库列表
- cpu排行计算机专业,最新计算机处理器排名_cpu性能排名梯形图高清大图
- 爬虫英雄联盟官网的全英雄介绍和技能介绍
- 单片机c语言计算器,基于STC89C52单片机的计算器的设计.doc
- 数电——高/低电平之间的差异与共同
- 《C++ Primer 第5版》-11.2关联容器概述-康奈尔笔记
- python的MYSQLdb
- 检测色卡饱和度和色彩偏差
- ubuntu 配置拼音输入法步骤