在 jquery 选择菜单中选择下一个选项

Posted 2023-02-25

【中文标题】在 jquery 选择菜单中选择下一个选项

【英文标题】：select next option in jquery selectmenu

【发布时间】：2010-11-16 11:47:36

【问题描述】：

尝试创建一个按钮，该按钮将转到已分配 $selectmenu 的选择菜单中的下一个选项。

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

适用于标准的 html 选择菜单，但当它分配有 jquery $selectmenu 时则不能。

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

知道如何控制选择菜单吗？

任何帮助表示赞赏...

丹。

【问题讨论】：

你应该发布一个插件的链接，因为它不是 jQuery 核心的一部分。

@Nick Craver: http://github.com/fnagel/jquery-ui

【参考方案1】：

你应该使用插件value方法。

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

其中theIndex 是选项的从零开始的索引

请注意，如果您在运行时修改选择中的<option> 列表，您必须完全销毁并从头开始创建插件。例如以下函数执行 ajax 调用来更新选择元素的选项列表

$.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();
    
);

【讨论】：

我遇到了类似的问题。为了刷新选择菜单，您不必调用“destroy”。只需调用 $('#mySelect').selectmenu() 当我调用“destroy”时，由于某种原因它弄乱了下拉列表的宽度

【参考方案2】：

更改所选选项后，您将不得不再次调用插件函数。

插件会根据下拉菜单添加一些样式化的 HTML 元素。一旦呈现，就很难使用您自己的代码手动更改它。您可能需要在修改后的下拉菜单中再次调用该函数。

【讨论】：

召回创建的重复项，但您的帖子让我找到了答案，非常感谢！

【参考方案3】：

由于菜单旨在为每个选项加载一个新页面，我只是抓住了原始选项 val() 并转到下一页菜单将自动重新启动 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 部分正确。您可以使用 value 或 index 方法来更改当前的活动选项。

更改选择（添加、修改、删除选项）时，您无需销毁重新初始化的选择菜单，而是在已初始化的元素上再次使用 myElement.selectmenu()。

更多信息请查看维基：https://github.com/fnagel/jquery-ui/wiki/Selectmenu