Множественный выбор — выбранный jQuery

Я успешно использую плагин 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>

Обычно для множественного выбора структура URL-адреса для запроса «И» будет выглядеть следующим образом:

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

ИЛИ следующее для запроса «ИЛИ»:

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

Получение любой из этих опций будет работать на данный момент (в конечном итоге я намерен добавить опцию для поиска AND/OR)

Любая помощь или указатели в правильном направлении, чтобы заставить эту работу работать, были бы замечательными.


person Rob    schedule 24.04.2012    source источник
comment
Если вы используете PHP, он может ожидать строку запроса, такую ​​как ?topics[]=topic1&topics[]=topic2&topics[]=topic3&mode=AND. Дайте мне знать, если это нормально.   -  person Salman A    schedule 25.04.2012
comment
Привет Салман. Если я выберу только одно значение из раскрывающегося списка множественного выбора, то отправка будет работать нормально, и первый '?' добавляется к URL-адресу. Проблема связана с множественным выбором, когда отправка просто выбирает последнее выбранное значение и загружает эту страницу...   -  person Rob    schedule 25.04.2012
comment
Если я выберу одно значение из раскрывающегося списка, отправка будет работать нормально, а первый '?' добавляется к URL-адресу. Проблема возникает с множественным выбором, когда отправка выбирает последнее выбранное значение и загружает эту страницу... Если я редактирую $output .=‹option value='.$link.'›.$term_name.‹/option›; сказать $output .=‹option value='.letter..$link.'›.$term_name.‹/option›; это создаст такие URL-адреса, как: domain.com/?topics=letterTOPIC1&topics=letterTOPIC2, ​​которые я надеялся изменить с помощью str_replace, но & , + / и т. д. имеют кодировку urlencoded, и я не могу найти способ их str_replace.   -  person Rob    schedule 25.04.2012
comment
Я настоятельно рекомендую использовать Select2 вместо Chosen. Избранное так и не было закончено. Это было отличное начало... Select2 гораздо более совершенен, содержит меньше ошибок, развивается и поддерживает современные концепции, такие как адаптивный дизайн. И это работает в основном так же, поэтому преобразование довольно просто. ivanberg.github.com/select2   -  person Jake    schedule 13.12.2012


Ответы (1)


Когда вы отправляете форму, вы можете создать URL-адрес с помощью JavaScript и изменить страницу примерно так:

$('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') или идентификатора $('form#yourID'), уникального для вашей формы.

$('select').val() вернет массив выбранных значений для элемента selet. Она должна быть квалифицирована так же, как и форма с классом $('select.yourClass') или идентификатором $('select#yourID'). JavaScript проходит через массив и добавляет каждое значение к корневому URL-адресу http://domain.com/?topics= с + между каждым значением. Как только это будет сделано, пользователь будет перенаправлен на новый URL-адрес.

person Matthew Darnell    schedule 24.04.2012
comment
Привет, Мэтью. Не могли бы вы немного рассказать о том, как я это реализую? Боюсь, мои навыки Javascript довольно скудны... - person Rob; 25.04.2012
comment
Это jQuery. '$('form').submit( function() { } )' будет срабатывать при отправке любой формы на странице. Вы можете квалифицировать его с помощью идентификатора, такого как $('form#myFormID'), или класса, такого как $('form.myFormClass'). $('select').val() вернет значение выбранного элемента. Вы можете квалифицировать его таким же образом, чтобы получить правильный. Я добавлю больше деталей к моему примеру. - person Matthew Darnell; 25.04.2012