Question

我对jquery不是很熟悉，但我在这里尝试这样做：

我正在尝试将一个下拉列表的值传递给另一个下拉列表，这里是jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    import="java.sql.*,com.connection.DBConnection;"%>
<!DOCTYPE html>
<html>
<head>
<title>Country</title>
<style>
.formContainer {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    border-radius: 15px;
    background-color: #75D1FF;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Country.js"></script> 
</head>
<body>
    <div class="formContainer">
        <form action="SampleServlet" method="get">
            <fieldset>
                <label>Country :</label> <select id="countryid" name="country">
                    <option value='select'>Select</option>
                    <%
                        Connection con = DBConnection.getConnection();
                        Statement st = con.createStatement();
                        String sql = "select * from country";
                        ResultSet rs = st.executeQuery(sql);
                        while (rs.next()) {
                    %>
                    <option value='<%=rs.getString(2)%>'><%=rs.getString(2)%></option>
                    <%
                        }
                        rs.close();
                    %>
                </select><br />

                <div class="Stateselect">
                <select id="Stateid">
                </select>       
                </div><br /><br />

                <div class="Cityselect">
                <select id="Cityid" onchange="loadXMLDoc()">
                </select>
                </div><br /><br />

                <div class="Areaselect">
                <select id="Areaid"></select>
                </div><br /><br />

                <div class="buttonsDiv">
                    <button type="submit">Submit</button>
                    <button type="reset">Reset</button>
                </div>

            </fieldset>
        </form>
    </div>
</body>
</html>

在这里，根据我选择的国家/地区，应根据城市和城市的状况，其中的区域显示州。我在这里使用了三个servlet类，即CountryServlet，StateServlet和CityServlet这是我正在使用的js文件：

$(document).ready(function() {
    $(".Stateselect,.Cityselect,.Areaselect").hide();
    $("#countryid").change(function() {
        var country = document
        .getElementById("countryid").value;
        if (country != 'select') {
            $.ajax({

                url : "ActionServlet?country="+ country,
                method : "GET",
                type : "html",
                success : function(
                        result) {
                    $(".Stateselect").html(result);
                    $(".Stateselect").show(700);
                }
            });
        } else {
            $(".Stateselect").hide(700);
        };
    });

    if(document.getElementById("Stateid").style.display != "none")
    {
        $('#Stateid').change(function() {
            var country = document.getElementById("country").value;
            var state = document.getElementById("Stateid").value;
            if (country != 'select' && state != null) {
                $.ajax({
                    url : "StateServlet?country="+ country+ "&state="+ state,
                    method : "GET",
                    type : "html",
                    success : function(result) {
                        $(".Cityselect").html(result);
                        $(".Cityselect").show(700);
                    }
                });
            } else {
                $(".Cityselect").hide(700);
            };
        });
    }

    if(document.getElementById("Cityid").style.display != "none") {
        $('#Cityid').change(function() {
            var country = document.getElementById("country").value;
            var state = document.getElementById("Stateid").value;
            var city = document.getElementById("Cityid").value;
            if ((country != 'select' && state != 'select') && city != 'select') {
                $.ajax({
                    url : "CityServlet?country="+ country + "&state=" + state + "&city="+ city,
                    // SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
                    method : "GET",
                    type : "html",
                    success : function(result) {
                        $(".Areaselect").html(result);
                        $(".Areaselect").show(700);
                    }
                });
            } else {
                $(".Areaselect").hide(700);
            };
        });
    }; 
});

问题是，只有第一个ajax调用正在运行。休息两个不是。请帮忙。 Thanx提前

Answer 1

你在js代码的第一行隐藏所有带下拉列表的div

$(".Stateselect,.Cityselect,.Areaselect").hide();

然后，如果div被隐藏，则根据事实绑定更改事件。

if(document.getElementById("Cityid").style.display != "none") {
}

由于隐藏了div，因此代码不会被执行，并且更改事件不会注册。我建议您重新访问已测试显示属性的if条件，例如if(document.getElementById("Cityid").style.display != "none")删除这些，代码将起作用。

更新

由于只有div可见时才需要运行代码，因此必须更改以下内容

if(document.getElementById("Cityid").style.display != "none") {
        $('#Cityid').change(function() {

进入

$('#Cityid').change(function() {
  if(document.getElementById("Cityid").style.display != "none") {

这样，更改事件始终绑定，但只有div可见时才会执行代码。

一个下拉列表的完整代码

$('#Cityid').change(function () {
    if (document.getElementById("Cityid").style.display != "none") {
        var country = document.getElementById("country").value;
        var state = document.getElementById("Stateid").value;
        var city = document.getElementById("Cityid").value;
        if ((country != 'select' && state != 'select') && city != 'select') {
            $.ajax({
                url: "CityServlet?country=" + country + "&state=" + state + "&city=" + city,
                // SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
                method: "GET",
                type: "html",
                success: function (result) {
                    $(".Areaselect").html(result);
                    $(".Areaselect").show(700);
                }
            });
        } else {
            $(".Areaselect").hide(700);
        };
    }
});

使用Multiple jquery .ajax（）调用将一个下拉列表的值传递给另一个下拉列表

1 个答案: