Ajax jQuery下拉框联动案例

 

需求：
　　使用ajax和jQuery实现下拉框联动。

 

注意：需要加入jquery-2.1.1.min.js

 

前台

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="silvan" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<title>Ajax jQuery下拉框联动案例</title>
<!-- 给select标签添加样式 -->
<style type="text/css">
select {
    width: 160px;
    font-size: 11pt;
}
</style>
</head>
<body>
<form action="hehe">
    <select name="first" id="first" >
        <option value="0">---请选择---</option>
        <option value="1" >中国</option>
        <option value="2">美国</option>
        <option value="3">日本</option>
    </select>
    <select name="second" id="second"></select>
    <script type="text/javascript">
    //$(function(){});=$(document).ready(function(){})，$(function(){})是简写
    $(function(){
        //改变下拉列表值时触发
        $("#first").change(function(){
            //获取下拉列表选择值
            var id = document.getElementById("first").value;
            //Ajax调用处理
            $.ajax({
               type: "POST",
               url: "second.jsp",
               data: "id="+id,
               success: function (data ,textStatus, jqXHR) {
                // 将响应数据以$符号分隔成字符串数组
                   var cityList = data.split("$");
                   // 获取用于显示菜单的下拉列表
                   var displaySelect = document.getElementById("second");
                   // 将目标下拉列表清空
                   displaySelect.innerHTML = null;
                   // 以字符串数组的每个元素创建option，
                   // 并将这些选项添加到下拉列表中
                   for (var i = 0 ; i < cityList.length ; i++){
                       // 创建一个<option.../>元素
                       var op = document.createElement("option");
                       op.innerHTML = cityList[i];
                       // 将新的选项添加到列表框的最后
                       displaySelect.appendChild(op);
                   }
               },
               error:function (XMLHttpRequest, textStatus, errorThrown) {      
                   alert("请求失败！");
               }
            });
         });
    });
</script>
</form>
</body>
</html>

后台

<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%
    String idStr = (String)request.getParameter("id");
    int id = idStr == null ? 1 : Integer.parseInt(idStr);
    switch(id){
        case 1:
            out.println("上海$广州$北京");
            break;
        case 2:
            out.println("华盛顿$纽约$加州");
            break;
        case 3:
            out.println("东京$大板$福冈");
            break;
    }
%>

 

posted @ 2017-11-20 21:35  silvan_happy  阅读(1645)  评论(0)  编辑  收藏  举报