CODEWITHSUNDEEP
javajqueryajaxjsp
Harish Gupta
Harish Gupta

Reputation: 402

populate the second select box based on the selection of first select box

There are two drop downs ,second drop down will be populated based on the first select box. Both of them will be populated from the database. I have populate the first select box , also the second select box is populated, but all the values are coming as a one value. first select box :

<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 for on change :

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

%>

second select box html 

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

</select>

Upvotes: 0

Views: 1559

Answers (1)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

Use distinct like;

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

Edit: Also you are putting some extra quotes on iteration part. Update it like;

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

Also you can use ;

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

    });
});

Have a look at here for working fiddle example

Your selectbox is wrong, you need to correct it like below;

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

For warn user for selecting time zone;

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

}

Upvotes: 1

Related Questions