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

我已经为我的注册页面创建了一个级联下拉菜单，在这里我从数据库中获取国家，并基于将检索到的国家

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

以下是我为在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>

我只想在“国家和州”下拉列表中添加一个“其他”选项，根据该选项可以显示其他文本框，我可以在其中输入其他州的值。我在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) {
    }
%>

---

但它没有起作用。请帮助我在select中添加另一个选项，我是一个新手，所以请帮助我给出示例代码，并且只向我提供JavaScript JSP或servlet

无需使用任何额外插件

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

这样我们将只修改DOM一次

您可能会对使用jQuery和selects获取更多信息的PDF感兴趣

使用Javascript

---

感谢您的回复，但我不想在我的应用程序中使用jquery，因为dis是一个小规模的项目，不受应用程序性能和所有方面的限制。。如果我正在填充数据库中的第二个下拉列表呢。

 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);
    }
}

  <% 
    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) {
    }
%>

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

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());

<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>