Question

I am implementing Location field in JS form using JSON,JQUERY
state

<select name="state" id="state-list" onchange="getcities(this)">
                  State  <option value=""  >Select a state...</option>
                </select>

    city<select name="city" id="cities-list" ">
                  State  <option value=""  >Select a city...</option>
                </select>

function in javascript

function getcities(s){
        switch(s.value)
        {
                case 'Assam':
                 $.getJSON('js/jquery/location/assam.php', function(json) {
                var select = $('#cities-list');
                $.each(json, function(k, v) {
                        var option = $('<option />');

                        option.attr('value', v)
                              .html(v)
                              .appendTo(select);
                });
                });
                break;
                case 'Arunachal':
                         $.getJSON('js/jquery/location/assam.php', function(json) {
                var select = $('#cities-list');
                $.each(json, function(k, v) {
                        var option = $('<option />');

                        option.attr('value', v)
                              .html(v)
                              .appendTo(select);
                });
                });
                break;
                default:        
        }
}

Now the problem is whenever i select the state then district are appear in the corresponding disrict dropdown box but if i again change the district new district are added but the previous are not removed How to remove the previous when state field is select

Answer 1

Try clearing your select box before appending the options.

Change this:

var select = $('#cities-list');

To this:

var select = $('#cities-list').empty();