根据另一个选择框填充选择框

Question

There are two select boxes ,both of them are populating from database.second select box should be populate based on the value selected from the first select box.first select box is already populated but i am unable to populate the second select box

<select id="country_obj" name="custCountry" class="field_size_e">

    <%
                                    Iterator contryIter = countries.iterator();
                                    Lookup lookup = null;
                                    while(contryIter.hasNext()) {
                                        lookup = (Lookup)contryIter.next();
                                        if(bbForm.getCircuit().getCustCountry().equalsIgnoreCase(lookup.getLabel())){
                                            out.print("<option selected=\"selected\" value='"+lookup.getValue()+"'");
                                            out.print(">");
                                            out.print(lookup.getLabel());
                                            out.println("</option>");
                                        }else{
                                        out.print("<option value='"+lookup.getValue()+"'");
                                        out.print(">");
                                        out.print(lookup.getLabel());
                                        out.println("</option>");
                                        }
                                    }
                                %>
    </select>

how do i populate the second select box based on the value of first select box

Answer 1

You can have a function in javascript to populate options for your second select tag.

function populate(val)
{
   //val is a string similar to "<option value='new_option'>new option</option><option...</option>..."
   $('#my_select2').append(val);
}

//below method is triggered whenever you select a value for your first select box
$("#country_obj").change(function(){
   var selected_str = $("#country_obj option:selected").text();
   //now pass this selected_str to a php page where options generation method is          present using $.ajax (refer http://api.jquery.com/jQuery.ajax/)
   //or you can implement the method here (in javascript) to generate options for your new select tag.
   }

})

Note: This is just for guidance. You can have implementations of both methods in one or you can have multiple methods. I'll leave that for you to decide.

EDIT: you can't have options generated for your second select tag in the same php page (like in your question) because, by the time your page is loaded and a user selects a value for first select tag your php code is already executed.