var countries =  [

{"name": "India", "code": "AF"}, 

{"name": "Usa", "code": "AX"}, 

{"name": "China", "code": "AL"}

];

var states =  [

{"name": "Andhra", "cntrycode": "AF"}, 

{"name": "Karnataka", "cntrycode": "AX1"}, 

{"name": "Kashmir", "cntrycode": "AL"}

];

var cities =  [

{"name": "Hyderabad", "statecode": "AF"}, 

{"name": "Secbad", "statecode": "AX"}, 

{"name": "Ameerpet", "statecode": "AF"}

];

​

// populate states ul and Append inside countries li

var stateitems = "";

$.each(states, function(i, si) {       

    stateitems += '<li id="level2"><a href="mylink?id='+ si.ID +'">'+ si.name +'</a><ul id="ulLevel2"></ul></li>';

});   

$("#ulLevel1").append(stateitems); 

​

// populate cities ul and Append inside states li

var cityitems = "";

$.each(cities, function(i, ci) {       

    cityitems += '<li id="level3"><a href="mylink?id='+ ci.ID +'">'+ ci.name +'</a><ul id="ulLevel3"></ul></li>';

});     

$("#ulLevel2").append(cityitems);

​

// ---------------------

​

$( "#menu" ).menu();

​

//Show hide drop down values

$( "#toggle" ).click(function() {

    $( "#menu" ).toggle(); 

});

​

// Show selected value in dropdown textbox

$("#menu").on('click', 'li a, li.level1 a', function() {

    $('#selectText').val('');

    var selText = $(this).text();

    $('#selectText').val(selText);

    $( "#menu" ).toggle();

});

​

​