jQuery, click on list item Q

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

What is `VARIABLE`? The selected option's text? If so, have a look at http://stackoverflow.com/questions/196684/jquery-get-select-option-text — Felix Kling, Jan 30 '12 at 15:18
Please show all the code if possible, i'm assuming this is a click event handler? — Paul Creasey, Jan 30 '12 at 15:19
ShankarSangoli gave answer i was looking for, yep you are right, it is click event handler — hullfan, Feb 01 '12 at 12:57
VARIABLE is part of JSON object which i include in URL so i can get more data about object — hullfan, Feb 01 '12 at 12:58

ShankarSangoli · Accepted Answer · 2012-01-30T15:34:04.960

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

Before you start appending new cities(option) you should clear the list.
Same applies to town list also
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>');
        });     
   }); 
});

how do you always know what OP's intentions are? I read a lot of questions and what they are asking makes no sense to me. Then your answer explains their actual problem. ESP maybe? — mrtsherman, Jan 30 '12 at 15:28
yep. that is it, totally forgot about "value" option under "option" tag — hullfan, Jan 31 '12 at 08:07

score 0 · Answer 2 · answered Jan 30 '12 at 15:19

0

you can get the value by

$(document).delegate("#grad_search","change",function(){

var variable = $(this).val(); //here you will get the selected value 
});

answered Jan 30 '12 at 15:19

Rafay

30,950
5
68
101

jQuery, click on list item Q

2 Answers2