Question

so here is my problem

i am getting data with getJSON and i made a option list, that is list of regions, and that is fine, now i need a functionality where clicking on list item i get another dropdown menu with list of towns for that region

so my code goes:

var encodedurl=escape("http:path");
$.getJSON("proxy3.php?url="+ encodedurl,

function(data) 
{   
$.each(data, function(i, item){
$("#grad_search").append('<option>' +item.city + "</option>");
});

so i need send variable from json in line var encodedurl=escape("http:path"); so when i click on list item i send data to another select option

var encodeurl_area=escape("http://some_path" + VARIABLE + "more_path");
$.getJSON("proxy3.php?url="+ encodeurl_area,
function(data)
{
$.each(data, function(i, item){
                            $("#kvart_search").append('<option>' + item.city_area + '</option>');
});     
}); 

so whole my problem is how to get VARIABLE in link above, i need get VARIABLE from my first function

Answer 1

There are few things you should take care in your code.

1. Before you start appending new cities(option) you should clear the list.
2. Same applies to town list also
3. When you populate the option, you should have a value for each option. This value can be used to pass for the next list to populate.

Change your code like this.

var encodedurl=escape("http:path");
$.getJSON("proxy3.php?url="+ encodedurl,

function(data) 
{   
   //Look here I am using empty method to clear the existing list  
   $("#grad_search").empty()
   $.each(data, function(i, item){
      $("#grad_search").append('<option value="' 
                       + item.cityId + '">' +item.city + "</option>");
   });
}

//Handle the change event and pass the selected value to get city areas(towns)
$("#grad_search").change(function(){
   var encodeurl_area=escape("http://some_path" + $(this).val() + "more_path");
   $.getJSON("proxy3.php?url="+ encodeurl_area, function(data)
     {
        //Look here I am using empty method to clear the existing list  
        $("#kvart_search").empty()
        $.each(data, function(i, item){
            $("#kvart_search").append('<option value="' 
                       + item.cityAreaId + '">' + item.city_area + '</option>');
        });     
   }); 
});