使用 JSP 和 Javascript 在 Ajax 级联下拉列表中包含其他选项

Question

我为我的注册页面创建了一个级联下拉菜单，我从数据库中获取国家/地区，并以将检索州的国家/地区为基础。

一切正常，但我不明白如何在下拉选择的最后一个下拉选择选项中包含 OTHER 选项。

以下是我为在 countries_States.jsp 中显示国家而编写的代码：

<tr>
                <td>Country : </td>
                <td>
                    <%

                        try {
                            MylistDAO dao = new MylistDAO();
                            ResultSet rs = dao.getCountries();
                            String ss;
                    %> <select id="combos" name="combos"
                    onChange="showcity(this.value);" onfocus="return(validCountry(this));">
                        <%
                            while (rs.next()) {
                                    ss = rs.getString(2);
                        %>
                        <option value="<%=ss%>"><%=ss%></option>
                        <%
                            }
                        %>
                </select> <%
    } catch (Exception e) {
    }
 %>
                </td>
            </tr>

以下是在 AJAX 中根据国家/地区检索状态列表的代码：-

function showcity(str) {

    document.getElementById("states").length = 0;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "getCity.jsp?q=" + str, true);
    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var xml = xmlhttp.responseXML;

            var tags = xml.getElementsByTagName("tr");
            for ( var i = 0; i < tags.length; i++) {
                var combo = document.getElementById("states");
                var option = document.createElement("option");
                option.text = tags[i].childNodes[0].childNodes[0].nodeValue;
                option.value = tags[i].childNodes[0].childNodes[0].nodeValue;
                try {
                    combo.add(option, null); //Standard 
                } catch (error) {
                    combo.add(option); // IE only 
                }

            }

    };
    xmlhttp.send();

}

以下是根据国家/地区检索州列表的 getCity.jsp 页面：

 <% 
    String names = request.getParameter("q");
    out.print(names);
    try {
        MylistDAO dao =new MylistDAO();
        //GetCity c = new GetCity();
        ResultSet rs = dao.getState(names);
        String xml = "<table>";
        while (rs.next()) {
            xml += "<tr>";
            xml += "<td>";
            xml += rs.getString(1);
            xml += "</td>";
            xml += "</tr>";
        }
        xml += "</table>";
        out.print(xml);
        //con.close();
        PrintWriter pw = response.getWriter();
        response.setContentType("text/xml");
        pw.write(xml);
        pw.flush();
        pw.close();
    } catch (Exception e) {
    }
%>

以下是我的 DAO.java 类，用于从数据库中获取数据以填充下拉列表：

 public class MylistDAO {
    public Connection con;
    public Statement st;

    public Statement  get_connection()
    {
        try{
            con=DaoConnections.connection();
            st=con.createStatement();
        }catch(Exception e){
            e.getMessage();
        }finally{
            try{if(con==null){
                con.close();
            }
            }catch(Exception ex){
                ex.getMessage();
            }
        }
        return st;
    }
    public ResultSet getCountries()
    {   
        ResultSet rs = null;
        Statement st=null;
        try{
            MylistDAO dao= new MylistDAO();
            st=dao.get_connection();
            rs= st.executeQuery("select * from countries");

        }catch (Exception e){}
        return (rs);
    }

    public ResultSet getState(String countryname)
    {   
        ResultSet rs = null;
        Statement st=null;
        try{
            MylistDAO dao= new MylistDAO();
            st=dao.get_connection();
            rs= st.executeQuery("select s.stateName as statename from states s,countries c where s.countryID=c.countryId and c.countryName= '"+ countryname+"'" );

        }catch (Exception e){
            e.getMessage();
        }
        return (rs);
    }
}

我只想在国家和州下拉菜单中添加 OTHER 选项，根据该选项显示 OTHER 文本框，我可以在其中输入其他州值。我在 getCity.jsp 中尝试了以下内容：

  <% 
    String names = request.getParameter("q");
    out.print(names);
    try {
        MylistDAO dao =new MylistDAO();
        //GetCity c = new GetCity();
        ResultSet rs = dao.getState(names);
        String xml = "<table>";
        while (rs.next()) {
            xml += "<tr>";
            xml += "<td>";
            xml += rs.getString(1);
            xml += "</td>";
            xml += "</tr>";
        }
xml += "<tr>";
            xml += "<td>";
            xml += "Other";
            xml += "</td>";
            xml += "</tr>";
        xml += "</table>";
        out.print(xml);
        //con.close();
        PrintWriter pw = response.getWriter();
        response.setContentType("text/xml");
        pw.write(xml);
        pw.flush();
        pw.close();
    } catch (Exception e) {
    }
%>

但它不起作用。请帮助我在选择中添加 OTHER 选项，我是新手，所以请帮助我提供示例代码，并且只提供 JavaScript JSP 或 Servlet 中的代码。

Answer 1

无需使用任何额外的插件，

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

如果您有很多选项，或者此代码需要非常频繁地运行，那么您应该考虑使用DocumentFragment，而不是多次不必要地修改 DOM。虽然只有少数几个选项，但我会说这不值得。

DocumentFragment 是提高速度的好选择，但我们不能使用 document.createElement('option') 创建选项元素，因为 IE6 和 IE7 不支持它。

我们可以做的是，创建一个新的选择元素，然后附加所有选项。循环完成后，将其附加到实际的 DOM 对象。

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

这样我们只修改一次 DOM！

您可能对cheat sheet (PDF) 感兴趣，了解有关使用 jQuery 和选择的更多信息。

使用 Javascript

<html>
<body>
<script language="JavaScript">
    function function1() {
        var newOption = document.createElement('<option value="TOYOTA">');
        document.all.mySelect.options.add(newOption);
        newOption.innerText = "Toyota";
    }
    function function2() {
        document.all.mySelect.options.remove(0);
    }
</script>
<select id="mySelect">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<input type="button" value="Add" onclick="function1();">
<input type="button" value="Remove" onclick="function2();">
</body>
</html>