使用 jQuery 提交表单下拉菜单

Posted 2023-05-09

【中文标题】使用 jQuery 提交表单下拉菜单

【英文标题】：Submit Form dropdown with jQuery

【发布时间】：2012-05-16 06:15:44

【问题描述】：

我正在使用一个名为dropkick 的下拉插件，它将选择菜单替换为更好看的自定义下拉菜单。我想在这个下拉列表中显示我的 WordPress 类别列表。这是生成下拉列表的 php 代码：

<form action="<?php bloginfo('url'); ?>/" method="get" class="pretty">
    <?php $select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
    echo $select; ?>
</form>

将其转换为“漂亮的下拉菜单”的 javascript 代码如下。

$('.pretty select').dropkick(
      theme: 'default',
      change: function (value, label) 
         INSERT CALLBACK HERE
      
);

我需要编写一个回调，在用户选择一个类别后提交表单。我该怎么办？

我尝试使用return this.form.submit() 和return $(this).parent().form.submit()，但没有提交表单。如何使用 jQuery 自动提交表单？

表单中已经定义了表单动作和方法。

【问题讨论】：

请查看有关 wordpress 存档下拉列表和 dropkick 的其他类似问题：***.com/questions/10487431/…

【参考方案1】：

Christofer Eliasson 的回答可能是正确的，但以防万一您有多个表格，这样会更好：

$(this).closest('form').submit();

【参考方案2】：

您可以使用 jQuery 的.submit() 发布表单。

鉴于您在 DOM 中只有一个带有 pretty 类的表单，您可以像这样发布表单：

$("form.pretty").submit();

【讨论】：

哇，没想到这么简单。非常有用。谢谢！

为了使事情更容易，最好使用 Nick George 的版本来搜索“this”（控件）所属的表单。从长远来看，它将使代码重用成为可能，因此您不必告诉它哪种形式（按类或按 id），它只是按父项搜索。

我有另一个非常相似的问题，我会在一分钟内发布。我会在这里发布链接。如果你不介意看看你的专业知识可能会有所帮助！一会儿

这是另一个问题：***.com/questions/10487431/…

@JCHASE11 很高兴它有所帮助，正如其他人所提到的，如果您在页面上有多个表单，请查看 Nick 的答案。