Question

有两个下拉列表，第二个下拉列表将根据第一个选择框填充。它们都将从数据库中填充。我已填充第一个选择框，也填充了第二个选择框，但所有值都是一个值。首先选择框：

<select id="country_obj" name="custCountry" class="field_size_e" onchange="populateSecValues(this);">
    <option value="">-select-</option>
    <% 
        Iterator contryIter = countries.iterator();
        Lookup lookup = null;
        while(contryIter.hasNext()) {
            lookup = (Lookup)contryIter.next();
            out.print("<option value='"+lookup.getValue()+"'");
            out.print(">");
            out.print(lookup.getLabel());
            out.println("</option>");
        }
    %>
</select>

改变的功能：

function populateSecValues(obj) {
    alert("enter the function");
    var country = obj.value;

    $.get('/maintenance/timeZoneFinder.jsp?country='+country, function(responseData) {
            $("#zones").html(responseData);
    }); 
}

timeZoneFinder.jsp

<%
    ResultSet rset = null;
    Connection  conn = null;
    Statement stmt = null;
    String SQL_COMMAND = "";

    try {
        conn  = ConnectionManager.getConnection();

        stmt = conn.createStatement();
        String country = request.getParameter("country");

        System.out.println("country========>"+country);
        SQL_COMMAND="select a.full_name from org_base.time_zone a where a.country_code='"+country+"'";
        rset = stmt.executeQuery(SQL_COMMAND);
        ResultSetMetaData meta = rset.getMetaData();
        int col = meta.getColumnCount();
        while(rset.next()){
        out.print("<option value='"+rset.getString(1)+"' >'"+rset.getString(1)+"'</option>");
        }
    } catch (Exception e) {
        e.printStackTrace();
    }

    finally {
        if (rset != null) rset.close();
        if (stmt != null) stmt.close();
        if (conn != null) conn.close();
    }

%>

第二个选择框html

<select>
<option value="" id="zones" class="field_size_e">-<%=bundle.getString("common.select") %>-</option>

</select>

Answer 1

使用distinct之类的;

SQL_COMMAND="select distinct(a.full_name) from org_base.time_zone a where a.country_code='"+country+"'";

编辑：此外，您还在迭代部分添加了一些额外的引号。更新它就像;

while(rset.next()){
   out.print("<option value='' >-select time zone--</option>");
   out.print("<option value='" + rset.getString(1) + "' >" + rset.getString(1) + "</option>");
}

你也可以使用;

<强> HTML：

<select id="select"></select>
<button id="click">Populate</button>

<强> JS：

$(document).ready(function(){
    $("#click").on('click', function() {
        var html = '<option value="val1">Val-1</option><option value="val12">Val-12</option>';
        $("#select").append(html);

    });
});

查看here的工作小提琴示例

您的选择框错误，您需要更正如下所示;

<select id="zones">
    <option value="" class="field_size_e">-<%=bundle.getString("common.select") %>-</option>
</select>

警告用户选择时区;

function populateSecValues（obj）{ var country = obj.value;

$.get('/maintenance/timeZoneFinder.jsp?country='+country, function(responseData) {
        $("#zones").html(responseData);
        alert("Please select time zone");
        $("#zones:first").focus();
});

}

根据第一个选择框的选择填充第二个选择框

1 个答案: