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”查询：

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。

多选 - 选择jQuery

1 个答案: