select next option in jquery selectmenu

问题

trying to create a button that will goto the next option in a selectmenu that has $selectmenu assigned to it.

$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');

works on a standard HTML select menu but not when it has the jquery $selectmenu assigned to it.

$('select#toolMenu').selectmenu({
    style:'popup', 
    width: 600,
    menuWidth: 600,
    maxHeight: 400,
    format: addressFormatting,
    change: function () { 
        var val = this.value;
        window.location=val;
    } 
});

any idea how i can control the selectmenu?

any help appreciated...

Dan.

回答1:

You should use the plugin value method.

$("select#toolMenu").selectmenu("value", theIndex);

where theIndex is the zero based index of the options

Please note that if you are modifying at runtime the <option> list inside the select you have to completely destroy and create the plugin from scratch. The following function for example does an ajax call to update the option list of a select element

$.ajax({
    type: "post",
    dataType: "json",
    url: 'your_url',
    async: false,
    data: {},
    beforeSend: function() {
        $("#mySelect").selectmenu('disable'); 
    },
    success: function (response) {
        $('#mySelect').html('');
        $.each(response, function (i, data) {
            $('#mySelect').append($("<option></option>").attr("value", data.Value).text(data.Text));
        });
        $('#mySelect').selectmenu('destroy').selectmenu();
    }
});

回答2:

After changing the selected option you will have to call the plugin function once more.

The plugin will add some styled HTML elements based on the drop down. Once it is rendered it will be hard to change that manually using your own code. You might have to call the function again on the drop down which is the modified one.

回答3:

as the menu was meant to load a new page for each option i just grabbed the original option val() and went to the next page where the menu would automatically re-initiate with the dom.

        jqueryMenu()

        $('a.previous').click(function(){

            val = $('option:selected', 'select').previous('option').val();
            window.location=val;

        })

        $('a.next').click(function(){

            val = $('option:selected', 'select').next('option').val();
            window.location=val;

        })

回答4:

@Lorenzo is partly right. You could use the value or index method to change the current active option.

When changing the select (add, modify, remove options) you do not need to destroy an reinit selectmenu but using myElement.selectmenu() again on your already intialized element.

Please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

来源：https://stackoverflow.com/questions/4193765/select-next-option-in-jquery-selectmenu

标签

jquery

select

option