dynamically changing selectbox

Question

I have two selectbox.

First one contains big category , and second one contains small category like countries and cities.

America    carifornia,NY,Sandiego
China      beijing, shanghai
Japan      tokyo, oosaka

first selectbox

<select name=countries>
<option value=america>America</option>
<option value=china>China</option>
<option value=japan>Japan</option>
</select>

second selectbox

<select name=usacities>
<option value=carifornia>carifornia</option>
<option value=ny>NY</option>
<option value=sandiego>sandiego</option>
</select>

now I would like to change the second select box dynamically according to first select box.

Useing jquery is the best way to make this??

At that time I should change all the select box including select tag? or I should keep only the data somwhere and change only data?

Answer 1

I think you have two solution:

1. Store your data somewhere and fill second <select> from data each time.
2. Use Ajax on changing select1 and update select2 content via ajax request.

I use first solution in your case:

var usacities = [   
                { "name" : "carifornia",  
                  "country"  : "america"},

                 { "name" : "NY",  
                  "country"  : "america"},

                { "name" : "Sandiego",  
                  "country"  : "america"},

                 { "name" : "beijing",  
                  "country"  : "china"},

                 { "name" : "shanghai",  
                  "country"  : "china"},

                 { "name" : "tokyo",  
                  "country"  : "japan"},

                  { "name" : "oosaka",  
                  "country"  : "japan"},


              ] 


$(document).ready(function(){
$("select[name = countries ]").on("change", function(){
     var selected = $(this).val();
     $("select[name = usacities]").html("");
         for(i=0; i<usacities.length; i++)
         {
             if(usacities.country == selected)
                $("select[name = usacities]").append("<option value='"+usacities.name+"'>" + usacities.country + "</option>");
         }
   });
});

Answer 2

Try this : put class attribute for second select box with same value as country select box. Like put class="america" for second select box and so on for other countries values and their select boxes. Also add one more class "cities" to all cities select box. Now use below code -

HTML :

<select name=countries>
  <option value=america>America</option>
  <option value=china>China</option>
  <option value=japan>Japan</option>
</select>

<select name=chinacities class="america cities">
  <option value=carifornia>carifornia</option>
  <option value=ny>NY</option>
  <option value=sandiego>sandiego</option>
</select>

<select name=usacities class="china cities">
  <option value=china1>china1</option>
</select>

<select name=japancities class="japan cities">
  <option value=japan1>japan1</option>
</select>

jQuery :

$(function(){
      // hide all city select boxes
      $('.cities').hide();
      //make default selected country's city visible
      $('.' + $('select[name=countries]').val() ).show();
      $('select[name=countries]').change(function(){
        // hide all city select boxes
        $('.cities').hide();
        //show city select box for selected country 
        var selectedCountry = $(this).val();
        $('.' + selectedCountry ).show();
      });
  });

JSFiddle Demo

Answer 3

yes. You can change use JQuery. I you dont want to use database you can use jquery as

 $('select[name=countries]').change(function(){
   var country =  $(this).val();
   $('.'+country+'cities').show();
 }

Answer 4

Try this:

<select name=countries id="country">
    <option value=america>America</option>
    <option value=china>China</option>
    <option value=japan>Japan</option>
</select>

<select name="cities" class="cities">
    <option data-parent = "default" value="">Select city</option>
    <option data-parent = "america" value=carifornia>carifornia</option>
    <option data-parent = "america" value=ny>NY</option>
    <option data-parent = "america" value=sandiego>sandiego</option>
    <option data-parent = "china" value=japan1>china1</option>
    <option data-parent = "japan" value=china1>japan1</option>
    <option data-parent = "japan" value=china1>japan2</option>
    <option data-parent = "japan" value=china1>japan3</option>
</select>



$(function(){
    $('select[name=countries]').change(function(){
        // hide all city select boxes
        $('.cities > option').hide();
        //show city select box for selected country 
        var selectedCountry = $("#country").val();
        $(".cities [data-parent = '"+selectedCountry+"']" ).show();
    });
    $('select[name=countries]').change();

});

Answer 5

Yes, you can.

The next code works assuming the Data Source has the Structure ´{Country : { Name, Cities}}´ but if you have another structure like arrays you have to make some changes.

    //Define the DataSource
    var countries = [{ Name : 'America', Cities : ['carifornia','NY','Sandiego']
    } ,  { Name : 'China', Cities : ['Beijin','Shangai'] } ];

After you need to create a function which will execute when the document is loaded.

//When the document loads is called this function
$(document).on('ready', function(){

Here you fill the first Select with the countries

      //Fill the select from countries
        $.each(countries, function(index, value){
            $("#Country").append("<option>"+value.Name+"</option>" );
        });

When the user change the option in the country automatically this method is executed an the second select is filled only with the selected country's cities

        //When a country change the cities are filled
        $("#Country").on("change", function(){
            var selectedCountry = $("#Country").val();
            $("#Cities").empty();
            $.each(countries, function(index, country){

Here

                if(country.Name == selectedCountry)
                {
                //The cities are filled                 
                $.each(country.Cities, function(index, city){
                        $("#Cities").append("<option>"+city+"</option>" );
                    });

                }
            });
        });
    });

The HTML is just that:

<select id="Country"><option>-</option></select>
<select id="Cities"></select>

There are some better ways of do it but for beginning is allrigth.