联合县城市,采用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<cityList.length;i++){
ulEle.append("<li onclick='changeCity(this)' value=" + cityList[i].cityid + "style='border: 0px'>"+cityList[i].city+"</li>");
}
}
});
}
//改变城市触发的函数
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<areaList.length;i++){
ulEle.append("<li onclick='changeArea(this)' value=" + areaList[i].areaid + "style='border: 0px'>"+areaList[i].area+"</li>");
}
}
});
}
//改变区县触发的函数
function changeArea(ele){
$("#showArea").text(ele.innerText);
$("#aid").val(ele.value);
}
html代码
<span class="list_title_1 fl" id="province">
<span class="fl" id="showPro" style="font-size:18px;padding-top:5px;width:170px;float:left">省</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul>
<c:forEach items="${provinceList}" var="province">
<li onclick="changePro(this)" style="border: 0px" value="${province.provinceid}">${province.province}</li>
</c:forEach>
</ul>
</span>
<span class="list_title_1 fl" style="margin-left:12px;" id="city">
<span class="fl" id="showCity" style="font-size:18px;padding-top:5px;width:180px">市</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="cities">
</ul>
</span>
<span class="list_title_1 fl" style="margin-left:12px;" id="area">
<span class="fl" id="showArea" style="font-size:18px;padding-top:5px;width:180px">区</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="areas">
</ul>
</span>
模拟select下拉的css代码
.list_title_1{ width: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{ width:70px; margin-left:0px;}
.list_title_1 img{ float:right; margin:15px 5px 0 0}
.list_title_1 ul{ display:none; width:200px; position:absolute; border:1px solid #d6d6d6; border-bottom:none; margin-top:34px; margin-left:-1px;}
.list_title_1 ul li{ width: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<String,Object> map = new HashMap<String,Object>();
JSONObject jo = null;
if(type!=null&&"city".equals(type)){
hql="from cities where provinceid='" + id + "'";
List<cities> 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<areas> 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的相应配置文件片段
<!-- 获取省市json -->
<action name="getAjaxJson" class="action.unset.ProjectTraderAction" method="getAjaxJson">
</action>
说明 下拉的省部件放置request域内。不要把ajax内在要求
版权声明:本文博主原创文章,博客,未经同意不得转载。
联合县城市,采用ajax,而使用ul模拟select下拉的更多相关文章
- 自己用ul模拟实现下拉多选框,
模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 用div,ul,input模拟select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Select下拉框使用ajax异步绑定数据
<!--前端样式--> <style> #searchs { width: 200px; position: absolute; border-top: none; margi ...
- SpringMVC之ajax+select下拉框交互常用方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【jquery】ajax 动态 改变 select下拉框选中的值
//JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...
- ul模拟select,位置,数据,是否可输入及输入提示效果都可作为参数直接传入
转发请注明出处,虽然转发几率不大... HTML <span class="theContainer"></span> CSS body {padding: ...
- ajax处理select下拉表单
$('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...
随机推荐
- "UBUNTU: SAUCE: apparmor: 3.0 backport of apparmor3"
下面提供的commit是为了让nexus 4g的内核支持ubunt touch的一些功能. 链接地址如下: "UBUNTU: SAUCE: apparmor: 3.0 backport of ...
- FusionCharts简明教程(一)---建立FusionCharts图形
由于该项目需要的报告需要做的事情,选择FusionCharts作为一种工具. 由于该报告没有任何接触,网上有没有更具体fusionCharts课程,所以我们决定做一个彻底的研究FusionCharts ...
- ZOJ 3635 Cinema in Akiba[ 大规模阵列 ]
门户:problemCode=3635">ZOJ 3635 Cinema in Akiba Time Limit: 3 Seconds Memory Limit: 65536 ...
- uva 11324 The Largest Clique(图论-tarjan,动态规划)
Problem B: The Largest Clique Given a directed graph G, consider the following transformation. First ...
- hdu3182 状态压缩水题
题意是这种 给你n个汉堡 每一个汉堡有它的价值 做每一个汉堡都得花费相应的能量 如今告诉你最大能量 让你求获得的最大的价值(有些汉堡必须有还有一些汉堡做好为前提) 给你的 ...
- 一个vbs文件将指定文件夹下的文件名输出到指定文件夹下
'on error resume NextConst MY_COMPUTER=&H11& Const WINDOW_HANDLE=0 Const OPTIONS=0 '设置我的电脑为根 ...
- Robotium调用getActivity()导致程序挂起的方法
1. 问题背景的叙述性说明 需要直接用在工作中没有项目的源代码robotium测试目标android平台launcher,该平台的基础上,当前日期的版本号android 4.4.2.之前我用来验证的可 ...
- 《Pro Android Graphics》读第三季度票据
Android Frame Animation: XML, Concepts and Optimization Frame Animation Concepts: Cels, Framerate, a ...
- HDU 3715 Go Deeper(2-sat)
HDU 3715 Go Deeper 题目链接 题意:依据题意那个函数,构造x数组.问最大能递归层数 思路:转化为2-sat问题,因为x仅仅能是0.1,c仅仅能是0,1.2那么问题就好办了,对于0, ...
- Android Tween Animation
View Animation, 它显示在view向上Tween Animation Tween动画.本质上没有变化View对象本身.只要改变它绘制 实施方式有两种.一个xml定义,直接在代码中的定义 ...