problem with jquery ui

problem with jquery ui

Hallo I have implemented Jquery Ui. I used the widget selectmenu, like this

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Selectmenu - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

        <script>
            $(function() {
            $( "#country" ).selectmenu();
            });
        </script>
</head>
<body>

    <select name="number" id="country">
        <option>Germany</option>
        <option selected="selected">USA</option>
        <option>Canada</option>

    </select>

</body>
</html>

but the problem, when I use the ID= selectmenue for $.post() to get data from data base it doesn't work, like this:

$(document).ready(function() {
    $('#country').change(function() {
       
        var cat = $(this).val();
        $.post('getCities.php',{cat: cat}, function(data){
            $('#cities').html(data);

        });

    });
})

 could you help me please !!