Adding selectmenu on select that's calling functions

Question

I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.

I'm having trouble figuring out how to nest these.

I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.

BUT, In the meantime, I thought someone could help expedite the process.

This is my script as is:

$(function() {
    var work = $( "#display" );
    $( "#selector" ).change(function( event ) {
        work.load($(this).val(),function(){
             $("#textdisplay").tabs();
        });
    });
});

This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu

I want my select to use selectmenu:

$(function() {
    $( "#selector" ).selectmenu();
});

Attempt 1:

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu(
        $( "#selector" ).change(function( event, ui ) {
            work.load($(this).val(),function(){
                 $("#textdisplay").tabs();
            );
        }); 
    });
});

Attempt 2:

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu({
        change: function( event ) {
            work.load($(this).val(),function(){
                 $("#textdisplay").tabs();
            });
        });
    });
});

Attempt 3:

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu({
        change: function( event, ui ) {
            work.load($(this).val(),function(){
                 $("#textdisplay").tabs();
            });
        });
    });
});

Attempt 4:

This attempt loads the selectmenu theme, but kills functionality

$(function() {
    $( "#selector" ).selectmenu();
});

$(function() {
    var work = $( "#display" );
    $( "#selector" ).change(function( event ) {
        work.load($(this).val(),function(){
             $("#textdisplay").tabs();
        });
    });
});

Attempt 5:

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu ({
        selectmenuchange: function( event, ui ) {
        work.load($(this).val(),function(){
             $("#textdisplay").tabs();
            });
        }
    }); 
});

Answer 1

So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.

$(function() {
    var work = $( "#display" );
    $( "#selector" ).selectmenu ({
        change: function( event, data ){
        work.load($(this).val(),function(){
             $("#textdisplay").tabs();
            });
        }
    }); 
});