两个选择框 ajax如何根据另一个选择框的内容获取_AJAX

最新推荐文章于 2020-12-03 11:03:45 发布

weixin_39688636

最新推荐文章于 2020-12-03 11:03:45 发布

阅读量128

点赞数

文章标签：两个选择框 ajax如何根据另一个选择框的内容获取

04ajax之三级联动实现省信息填充和市信息功能

4.1编程题

4.1.1 根据视频，将省信息填充到省下拉框中？

$.get("area",{parentid:0},function(data){
	//使用eval方法将数据转换到js对象
	eval("var areas="+data);
	//将响应省数据填充到省下拉框
		//获取下拉框对象
		var sel=$("#pre");
		//清空原有内容
		sel.empty();
		//遍历
		for(var i=0;i<areas.length;i++){
			//填充
			sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
		}
		//触发省下拉框的change事件
		$("#pre").trigger("change");
	
});

4.1.2 根据视频讲解完成市信息下拉框功能

$("#pre").change(function(){
	//获取当前选择的省的areaid
	var areaid=$("#pre").val();
	//发起ajax请求,请求当前市的信息
	$.get("area",{parentid:areaid},function(data){
		//使用eval方法将数据转换到js对象
		eval("var areas="+data);
		//将响应省数据填充到省下拉框
			//获取下拉框对象
			var sel=$("#city");
			//清空原有内容
			sel.empty();
			//遍历
			for(var i=0;i<areas.length;i++){
				//填充
				sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
			}
			
			//触发省下拉框的change事件
			$("#city").trigger("change");
	});
	
})

05ajax之三级联动代码完整实现

5.1 简答题

5.1.1 根据视频讲解完成城镇信息下拉框功能?

$("#city").change(function(){
	
	$.get("area",{parentid:$("#city").val()},function(data){
		//使用eval方法将数据转换到js对象
		eval("var areas="+data);
		//将响应省数据填充到省下拉框
			//获取下拉框对象
			var sel=$("#region");
			//清空原有内容
			sel.empty();
			//遍历
			for(var i=0;i<areas.length;i++){
				//填充
				sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
			}
	});
})

5.1.2 根据视频讲解，目前实现的三级联动中为什么选择省信息后，市信息为改变但是城镇信息还是不变？如何解决？并在代码实现。

答：change事件必须要手动change才算change,页面自动填充进去的不算

解决：在ajax请求后是手动触发对应下拉框的change事件

代码：

//触发省下拉框的change事件
$("#pre").trigger("change");

5.1.3 根据视频讲解完成代码的封装

function getData(areaid,sid){
	//发起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");
	})
}

06ajax之搜索框提示语功能需求和思路分析

6.1 简答题

6.1.1 视频中的功能需求是什么?

答：用户在搜索框中输入关键字,然后搜索框下出现下拉选项,提示关键字的提示语.用户可以使用鼠标进行提示语的选择,也可以使用键盘的上下键来进行选择.

6.1.2 视频讲解的功能分析(思路)的内容是？

1、创建搜索界面(搜索框+提示语div【如果没有提示语这个div是隐藏的】+搜索按钮)
2、给搜索框添加onkeyup事件,键盘弹起时发送ajax请求
请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的div中
4、实现使用鼠标选择提示语
5、实现使用键盘的上和下键选择提示语
6、实现鼠标和键盘的联动操作
7、将显示提示语的div进行隐藏,当有提示语的时候显示隐藏的div

07ajax之搜索框提示语功能数据库设计和实现

7.1 简答题

7.1.1 根据视频讲解完成提示语功能的数据库设计

创建表(data)：存储了常用的关键字数据

关键字编号：id

关键字数据：title

说明：remark

7.1.2 根据视频讲解完成提示语功能的SQL语句设计

SQL语句设计：查询以用户当前搜索框数据开头的关键字

select * from data where title like 'a%'

7.1.3 根据视频讲解完成数据库的实现。

/*
Navicat MySQL Data Transfer

Source Server         : MySQL
Source Server Version : 50712
Source Host           : localhost:3306
Source Database       : project

Target Server Type    : MYSQL
Target Server Version : 50712
File Encoding         : 65001

Date: 2019-07-17 00:22:33
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `t_user`
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `uid` int(10) NOT NULL AUTO_INCREMENT,
  `uname` varchar(100) NOT NULL,
  `pwd` varchar(100) NOT NULL,
  `sex` char(4) NOT NULL,
  `age` int(3) NOT NULL,
  `birthday` date NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_user
-- ----------------------------
INSERT INTO `t_user` VALUES ('1', '张三', '123', '男', '18', '1988-09-09');
INSERT INTO `t_user` VALUES ('2', '李四', '456', '男', '18', '1988-09-09');

08-ajax之搜索框体提示语功能页面创建和键盘事件添加

8.1 编程题

8.1.1 根据视频完成提示语功能页面的创建。

<div id="container" style="width: 550px;margin: auto;">
	<!-- 创建div进行搜索框的布局 -->
	<div id="sdiv" style="width: 550px;margin: auto;margin-top: 200px;">
		<input style="width: 400px;height: 30px;font-size: 15px;" type="text" name="search" id="search" value="">
		<input style="height: 30px;width: 100px;" type="button" value="搜索">  
	</div>
	<!-- 提示语div -->
	<div id="dataDiv" style="width: 398px;display: none;300px;border: solid 1px;border-top: none;"></div>
</div>

8.2.2完成键盘事件的添加。