使用AJAX和数据库的动态下拉列表

时间:2012-11-25 06:57:30

标签: java ajax jsp drop-down-menu

我希望有人可以指导我朝着正确的方向前进。我要做的是创建两个下拉列表,其中第二个(城市)依赖于第一个(状态)。例如,当我点击华盛顿时,我想要第二个下拉菜单列出西雅图和Walla Wallal;乔治亚州,亚特兰大,雅典​​等。最终我的目标是将几个列表链接在一起(国家 - >州 - >县 - >城市)但如果我可以让这两个工作,我想我可以弄清楚如何去做。

到目前为止,我已经设置了两个数据库。具有cityid(主)和cityname的表CITY作为列和表STATE,其中stateid(主要)和statename为列。

代码如下

dropDown.jsp:

<script>
function createRequestObject(){
    var req;
    if(window.XMLHttpRequest){
        //For Firefox, Safari, Opera
        req = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        //For IE 5+
        req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        //Error for an old browser
        alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
    }
    return req;
}

//Make the XMLHttpRequest Object
var http = createRequestObject();
function sendRequest(method, url){
    if(method == 'get' || method == 'GET'){
        http.open(method,url);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
}//end function send

function handleResponse(){
    if(http.readyState == 4 && http.status == 200){
        var response = http.responseText;
        if(response){
            document.getElementById("second_dropdown_code").innerHTML = response;
        }
    }
}

function getCityDropdown() {
    var w = document.myform.mylist.selectedIndex;
    var country_id = document.myform.mylist.options[w].value;
    sendRequest('GET','getCites.do?stateid=' + state_id);
}

</script>

<FORM NAME="myform">
<SELECT NAME="state" onChange="getCityDropdown()">
    <OPTION VALUE="1">Georgia</option>
    <OPTION VALUE="2">Washington</option>
</SELECT>
</FORM>
<div id="second_dropdown_code"></div>

getCities.java

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    try {
        processRequest(request, response);

        String sql = "select * from CITY";
        Connection connection = datasource.getConnection();
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        ResultSet resultSet = preparedStatement.executeQuery();

        while (resultSet.next() ) {
            //out.println(resultSet.getInt("cityid") + "<br/>" + resultSet.getString("city") + "<br/>" + resultSet.getString("INSTRUCTOR") + "<br/>" + resultSet.getString("BUILDING") + "<br/>" + resultSet.getString("ROOM") + "<br/>");
            //out.println(resultSet.getInt("cityid") + "<br/>" + resultSet.getString("city") + "<br/>" );
            //out.println("<select name=\"city\"><option value=\"1\">Atlanta</option><option value=\"2\">Walla Walla</option></select> ");
        }

        resultSet.close();
        preparedStatement.close();
        connection.close();

    } catch (SQLException ex) {
        Logger.getLogger(getCities.class.getName()).log(Level.SEVERE, null, ex);
    }
}

我知道我需要在while循环中使用某种if语句,但我不知道我从哪里得到参数来比较stateid和cityid。

任何指导都会得到满足,谢谢。

1 个答案:

答案 0 :(得分:0)

设计中存在一个根本问题:根据您当前的数据库设计,无法知道哪些城市属于哪个州。

表格看起来应该是这样的:

State
    - id
    - name

City
    - id
    - name
    - state_id (foreign key to State.id)

用于获取给定状态ID的城市的SQL查询将因此看起来像这样:

select city.id, city.name from city
where city.state_id = ?
order by city.name