.net bootstrap 下拉树状选择框_三级联动 和 搜索框提示 +数据库+ajax 050

/** areaid 选择要改变的事件 sid 获取下拉框对象

* 封装三级联动方法

*

* @param areaid

* @param sid

* url 请求的servlet

* areaid 要发送的data数据

* sid 获取要添加的下拉框

*/

function getData(url,areaid,sid){

$.ajax({

//发起ajax请求，请求当前省的市信息

type: "get",

url: url,

data: {parentid: areaid},

success: function (data) {

//alert(data)

eval("var areas=" + data);

//获取下拉框对象

var sel = $("#" + sid);

//清空原有内容

sel.empty();

for (var i = 0; i < areas.length; i++) {

sel.append("<option value='" + areas[i].areaid + "'>" + areas[i].areaname + "</option>")

//触发省下拉框的change事件

$("#" + sid).trigger("change");

}

}

})

// //发起ajax请求，请求当前省的市信息

// $.get("area",{parentid:areaid},function(data){

// //使用eval方法将数据转换为js对象

// eval("var areas="+data);

// //获取下拉框对象

// var sel=$("#"+sid);

// //清空原有内容

// sel.empty();

// //遍历

// for(var i=0;i<areas.length;i++){

// sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")

// }

// //触发省下拉框的change事件

// $("#"+sid).trigger("change");

// })

}

/** HTML

<div style="margin: auto;width: 750px;margin-top: 200px;">

省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>

市: <select name="" id="city" style="width: 200px;height: 30px;"></select>

区县: <select name="" id="town" style="width: 200px;height: 30px;"></select>

</div>

* 数据库

* area.sql

*

* Ajax案例之三级联动：

功能需求：

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中

出现对应的该市下面的区/县信息

技术分析:

ajax技术+jsp+servlet+jdbc

需求分析(思路):

1、创建页面：页面中有三个下拉框，分别为省、市、区/县

2、页面加载成功发起ajax请求，请求省的信息，并将响应结果

填充到省下拉框中

3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求

请求该省下的市信息，并将响应数据填充到市下拉框

4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求

请求该市下的区/县信息，并将数据填充到区/县下拉框中

数据库设计：

创建表(area)：存储了省、市、区/县信息

设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。

地区id:areaid

地区名:areaname

设计表实现二：

地区id:areaid

地区名:areaname

地区上级id：parentid

sql语句设计:

查询所有的省信息:

select * from area where parentid=0;

查询选择的省的市信息(假如：选择的山东省的areaid为110000,)

select * from area where parentid=110000;

查询选择的市的区/县信息(假如：选择的山东省的济南市areaid为110001)

select * from area where parentid =110001;

代码中

select * from area where parentid=?;

数据库实现:将资料中提供的area.sql文件导入到数据库中即可

功能实现：参照源码即可

代码缺陷：

发现请求省，市，县的代码中基本上是一致的。代码的冗余量有点大

解决:

考虑使用封装

实现:形同的保留，不同的传参。具体参照源码

$(function () {

$.ajax({

type:"get",

url:"area",

data:{parentid:0},

success:function (data) {

//用eval转换为js对象

eval("var list="+data)

var pre = $("#pre");

var city = $("#city");

city.empty();

//清空原有内容

pre.empty();

for(var i=0;list.length;i++){

pre.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")

}

}

})

//页面加载成功后触发省的

$("#pre").change(function () {

var areaid= $("#pre").val();

$.ajax({

type:"get",

url:"area",

data:{parentid:areaid},

success:function (data) {

eval("var areaid="+data);

var city = $("#city");

city.empty();

var town = $("#town");

town.empty();

for(var i=0;i<areaid.length;i++){

city.append("<option value='"+areaid[i].areaid+"'>"+areaid[i].areaname+"</option>")

// city.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")

}

$("#city").trigger("change");

}

})

})

//页面加载成功点击市后触发区的信息

$("#city").change(function () {

var areaid= $("#city").val();

$.ajax({

type:"get",

url:"area",

data:{parentid:areaid},

success:function (data) {

//alert(data)

eval("var areaid="+data);

var town = $("#town");

town.empty();

for(var i=0;i<areaid.length;i++){

town.append("<option value='"+areaid[i].areaid+"'>"+areaid[i].areaname+"</option>")

// city.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")

}

}

})

})

* */

<!--
ajax之搜索框关键字提示语：
功能需求：
用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。
用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
技术分析：
ajax技术+servlet+jsp+jdbc
功能分析(思路)：
1、创建搜索界面(搜索框和提示语div和搜索按钮)
2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的div中
问题：
现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求，请求提示语数据。
解决：
判断用户单击的键盘的按键符合要求再发请求。
解决：
获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取
4、实现使用鼠标选择提示语
5、实现使用键盘的上和下键选择提示语
6、实现鼠标和键盘的联动操作
7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div
完善：
问题1：只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。
而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。
但是其实只需要最后一次进行请求发生即可。
解决1:
使用延迟发送请求。
使用1：
window.setTimeout
问题2：
event对象在火狐浏览器中使用window.event获取不到。
解决2:
在获取浏览器中使用传参的方式给event进行赋值。
使用：参照源码即可
数据库设计：
创建表:(data) 存储了常用的关键字数据
关键字编号：id
关键字数据：title
说明：remark
添加测试数据:要求前期测试数据为英文单词
SQL语句设计:查询以用户当前搜索框数据开头的关键字
select * from t_data where title like 'a%'
注意：
测试数据不要太多。
数据库实现：在数据库中创建表即可,并添加测试数据。
-->
<!--引入jQuery文件 -->
<script type="text/javascript" src="myjs/jquery-1.9.1.js"></script>
<!--声明js代码域 -->
<script>
//创建计数器var count=-1;
//声明延迟发送的idvar id;
$(function () {
//键盘弹起事件
$("#search").keyup(function () {
//获取event事件var code = window.event
//获取keycod的键盘的值var keyCode =code.keyCode;
//声明正则表达式var reg=/^s+$/g;
//判断 keycode 在 1-9 和 a-z 之间 keyCode==8 删除键 keyCode==32 空格键if(keyCode>=48&&keyCode<=90|| keyCode==8 || keyCode==32){
//获取输入框的值var st =$("#search").val();
//判断请求数据是否为空if(st=="" || reg.test(st)){return;
}
//清除之前的要发送的内容
window.clearTimeout(id)
//一秒之后请求发送
id=window.setTimeout(function () {
//发送ajax请求
$.ajax({
type:"get",
url:"search",
data:{stdata:st},
success:function (data) {var dataDiv = $("#dataDiv");
//清空原有内容
dataDiv.empty();
//用eval放法转换为可以执行的js对象
eval("var datashu="+data)if(datashu.length>0){
$("#dataDiv").show();
}for(var i=0;i<datashu.length;i++){
//循环遍历 将 后台的值 追加到 id为dataDiv 的div 中
dataDiv.append("<div style='padding: 5px'>"+datashu[i].title+"</div>")
}
//给提示语添加鼠标选择效果
$("#dataDiv div").mouseover(function () {
//清空所有div的提示语的背景颜色
$("#dataDiv div").css({background:""});
//$(this).css("background-color","#f0f0f0");
$(this).css({background:"#f0f0f0"});
//鼠标和键盘的联动 将当前鼠标选择的div 赋值给计数器
count=$(this).index();
//将当前选择的值改变到搜索框中
$("#dataDiv div").click(function () {
//获取搜索框的值 并把提示语放到搜索框中
$("#search").val($(this).html());
})
})
$("#dataDiv").bind({
blur:function () {
$("#dataDiv").hide()
},
click:function () {
$("#dataDiv").hide()
}
})
}
})
},1000)
}
//判断是否是键盘上键if(keyCode==40){if($("#dataDiv").length>0){
count=count<$("#dataDiv div").length-1?++count:0;
$("#dataDiv div").css({background:""});
$("#dataDiv div:eq("+count+")").css("background-color","#f0f0f0")
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
}
//判断是否是键盘下键if(keyCode==38){if($("#dataDiv").length>0){
count=count>0?--count:$("#dataDiv div").length-1;
$("#dataDiv div").css({background:""});
$("#dataDiv div:eq("+count+")").css("background-color","#f0f0f0")
$("#search").val($("#dataDiv div:eq("+count+")").html());
//将当期选择的div
}
}
//判断是否是键盘的确认键if(keyCode==13){
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
})
})
</script>
</head>
<body>
<!--创建div容器将提示语div和搜索框div显示到一起 -->
<div id="container" style="width: 550px;margin: auto;">
<!--创建div进行搜索框的布局 -->
<div id="sdiv" style="width: 550px;margin: auto;margin-top: 200px;">
<input type="text" name="search" id="search" value="" style="width:400px;height: 30px;font-size: 18px;" />
<input type="button" value="搜索" style="height: 30px;width: 100px;position: absolute;top:200px;"/>
</div>
<!-- 提示语div -->
<div id="dataDiv" style="width: 398px;height: 300px;border: solid 1px;border-top: none;display: none" ></div>
</div>