您的位置：首页 > Web前端 > JQuery

jquery+ json--省市二级联动

2011-09-15 10:09 351 查看

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.6.1.js">
        </script>
        <script language="JavaScript">
            $(function(){
                $("#s1").change(function(){
                    var obj = $("#s1");//取得下拉列表框对象 s1

                    //                  alert(obj);


                    //2. 取得Options 的长度

                    len = $('#s1 option').length
                    //                  alert(len);



                    //3. 取得所选值  注意，如果option没有value属性，则默认取的是text属性值

                    obj_value = $('#s1').val();

                    //                  alert("$('#s1').val()"+obj_value);

                    //                  alert($('#s2').val());


                    //4. 取得所选中的option

                    var opt = $("#s1 option:selected");
                    ;
                    //                  alert("opt:"+opt);

                    //                  alert(opt.text());

                    //                  alert(opt.val());



                    var url = "../jsonServlet";
                    var param = "name=" + $("#s1 option:selected").text();
                    alert(param);
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: param,
                        cache: false,
                        dataType: "json",
                        success: function(msg){
                            //jsonServlet 返回的是一个JSONArray

                            alert(msg);

                            //清空下拉列表框

                            $("#s2").empty();

                            //遍历数组


                            $.each(msg, function(i, text){
                                alert("数组的索引：" + i);
                                alert("数组的值：" + text);
                                //增加option

                                $("#s2").append("<option>" + text + "</option>")


                            });
                        }
                    })

                });               })



        </script>
    </head>
    <body>
        <p align="center">
         jquery+ json--省市二级联动
        </p>
        <table align="center">
            <tr>
                <td>
                    省份
                </td>
                <td>
                    <select id="s1">
                        <option value="1">省份</option>
                        <option value="2">湖北</option>
                        <option value="3">浙江</option>
                    </select>
                </td>
                <td>
                    <select id="s2">
                        <option>城市</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script language="JavaScript">
$(function(){
$("#s1").change(function(){
var obj = $("#s1");//取得下拉列表框对象 s1
//					alert(obj);

//2. 取得Options 的长度
len = $('#s1 option').length
//					alert(len);

//3. 取得所选值  注意，如果option没有value属性，则默认取的是text属性值
obj_value = $('#s1').val();

//					alert("$('#s1').val()"+obj_value);
//					alert($('#s2').val());

//4. 取得所选中的option
var opt = $("#s1 option:selected");
;
//					alert("opt:"+opt);
//					alert(opt.text());
//					alert(opt.val());

var url = "../jsonServlet";
var param = "name=" + $("#s1 option:selected").text();
alert(param);
$.ajax({
type: "POST",
url: url,
data: param,
cache: false,
dataType: "json",
success: function(msg){
//jsonServlet 返回的是一个JSONArray
alert(msg);

//清空下拉列表框
$("#s2").empty();

//遍历数组

$.each(msg, function(i, text){
alert("数组的索引：" + i);
alert("数组的值：" + text);
//增加option
$("#s2").append("<option>" + text + "</option>")

});
}
})

});
})

</script>
</head>
<body>
<p align="center">
jquery+ json--省市二级联动
</p>
<table align="center">
<tr>
<td>
省份
</td>
<td>
<select id="s1">
<option value="1">省份</option>
<option value="2">湖北</option>
<option value="3">浙江</option>
</select>
</td>
<td>
<select id="s2">
<option>城市</option>
</select>
</td>
</tr>
</table>
</body>
</html>

后台：JsonServlet.java

Java代码

package com.wepull.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JsonServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub

        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        String name = request.getParameter("name");
        System.out.println("ajax传来的name："+name);


        PrintWriter  pw = response.getWriter();

        JSONArray array = new JSONArray();
        if("湖北".equals(name)){

            array.add("武汉");
            array.add("宜昌");
            array.add("黄石");
            array.add("黄冈");
        }else if("浙江".equals(name)){
            array.add("杭州");
            array.add("温州");
            array.add("台州");
        }
        System.out.println(array);
        System.out.println("array.toString()"+array.toString());
        pw.println(array);
    }

}

package com.wepull.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JsonServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");

String name = request.getParameter("name");
System.out.println("ajax传来的name："+name);

PrintWriter  pw = response.getWriter();

JSONArray array = new JSONArray();
if("湖北".equals(name)){

array.add("武汉");
array.add("宜昌");
array.add("黄石");
array.add("黄冈");
}else if("浙江".equals(name)){
array.add("杭州");
array.add("温州");
array.add("台州");
}
System.out.println(array);
System.out.println("array.toString()"+array.toString());
pw.println(array);
}

}

附：jQuery添加/删除Select的Option项：

1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function javascript url html ajax

相关文章推荐

新的分享

章节导航