多选 - 选择 jQuery

Question

我正在使用 Harvest Chosen jQuery 插件成功地在 Wordpress 网站上创建一个带有提交按钮的下拉单选列表。这被连接起来以显示给定分类中的所有术语，并允许用户选择一个术语，然后按下提交按钮以加载与所选术语相关的相应页面。

我现在正在尝试让插件与分类中的多个术语选择一起使用。我有选择工作，在前端用户可以选择多个术语，但我不知道如何提交多个选择。

我知道我的代码缺少某些内容，但我不知道需要修改什么以允许选择多个术语。

这是我目前所拥有的：

<form action="<?php bloginfo('url'); ?>">
<div>
<?php
function get_terms_dropdown($taxonomies, $args){
    $myterms = get_terms($taxonomies, $args);
    $output ="<select name='topics' class='chosen' style='width:500px' multiple='true'>";
    foreach($myterms as $term){
        $root_url = get_bloginfo('url');
        $term_taxonomy = $term->taxonomy;
        $term_slug = $term->slug;
        $term_name = $term->name;
        $link = $term_slug;
        $output .="<option value='".$link."'>".$term_name."</option>";

}
    $output .="</select>";
return $output;
}

$taxonomies = array('topics');
$args = array();
echo get_terms_dropdown($taxonomies, $args);

?>
<div><input type="submit" value="Filter" /></div>
</div>
</form>

通常，对于多项选择，“AND”查询的 URL 结构如下所示：

domain.com/?topics=topic1+topic2+topic3

“OR”查询的 OR 如下：

domain.com/?topics=topic1,topic2,topic3

现在获取这些选项中的任何一个都可以（我最终打算为 AND/OR 搜索添加一个选项）

任何帮助或指向正确方向以使这项工作正常进行都会很棒。

Answer 1

当您提交表单时，您可以使用 JavaScript 构建 URL 并使用以下内容更改页面：

$('form').submit( function() {
    var selectArray = $('select').val();
    var newURL = "http://domain.com/?topics=";
    for (var i = 0; i < selectArray.length; i++) {
        if ( 1 != 0 ) {
            newURL += "+";
        }
        newURL += selectArray[i];
    }
    window.location = newURL;
});

故障：$('form').submit( function() { [...] }); 在提交表单时被触发。您可能希望使用您的表单唯一的类 $('form.yourClass') 或 ID $('form#yourID') 来限定它。

$('select').val() 将为一个 selet 元素返回一个包含选定值的数组。它应该以与具有类$('select.yourClass') 或ID $('select#yourID') 的表单相同的方式进行限定。 JavaScript 遍历数组并将每个值附加到 http://domain.com/?topics= 的根 URL，每个值之间有一个 +。完成后，用户将被重定向到新 URL。