How to implement ajax in jQuery UI?

Question

PHP

In JQuery UI there is a so-called selectmenu, the point is to throw in the list items I need (tobish option) which in turn come json from the database, and when selecting a certain list item, make the necessary data loading from the same json ajax means, respectively . With the help of the script, I received some json (I threw off the preview, because there will be characters due to the encoding) :

{id: "1", city: "Санкт-Петербург", name: "Вася"}
{id: "2", city: "Москва", name: "Коля"}
{id: "3", city: "Тверь", name: "Петя"}
{id: "4", city: "Самара", name: "Света"}
{id: "5", city: "Великий Новгород", name: "Костя"}
{id: "6", city: "Краснодар", name: "Ира"}
{id: "7", city: "Ярославль", name: "Настя"}

There is this markup:

<select id="selectmenu">
  <option value="" selected="selected"></option>
</select>

And the script itself:

$(document).ready(function(){
      $( "#selectmenu" ).selectmenu({
        change: function() {
                                //текущий пункт списка 
        	alert($("#selectmenu :selected").html());
        }
      });

      $.getJSON('mysql_json.php', function(data) {
            for(var i=0;i<data.length;i++){
                $('#selectmenu').append("<option>"+data[i].city +"</option>");
            }
      });
});

Actually, on the change event, the same ajax data loading should occur (for example, the Moscow menu item was selected - and all people from Moscow are displayed) To do this, as I understand it, the condition is necessary that the current list of the item should be equal to the city variable in the multidimensional array with subsequent data in see who lives there directly - name. Or is there an easier way to implement everything? And how to make ajax be a parameter as a change event? Many times I saw that they do like this:$("#my_select :selected").html();

$( "#selectmenu" ).selectmenu({
        change: function() {
                                //текущий пункт списка 
        	alert($("#selectmenu :selected").html());
        },
                          open:function(){
                          наш ajax запрос...
      });

But that doesn't work.
More thanks in advance!

Answer 1

The question is not entirely clear, although if you answer "Actually, the same ajax data loading should occur on the change event," take and substitute your ajax request into the function:

$(document).ready(function(){
      $( "#selectmenu" ).selectmenu({
        change: function() {
          $.getJSON('mysql_json.php', function(data) {
            for(var i=0;i<data.length;i++){
                $('#selectmenu').append("<option>"+data[i].city +"</option>");
            }
          });
                                //текущий пункт списка 
        	alert($("#selectmenu :selected").html());
        }
      });

      
});

Although, I repeat, your task is not completely clear to me.