多重選擇 - 選上的jQuery的

我現在用的是嘉實選上的jQuery插件成功地創建一個下拉單選擇列表帶有一個提交按鈕上的WordPress站點。這是連接起來顯示給定分類的所有術語，並允許用戶選擇一個術語，然後按提交按鈕加載與選定術語相關的相應頁面。多重選擇 - 選上的jQuery的

我現在試圖讓插件從分類學方面的多種選擇工作。我有選擇工作，並在前端用戶可以選擇多個條款，但我不知道如何提交多個選擇。

我知道我的代碼是失去了一些東西，但我無法弄清楚哪些需要修改，以允許選擇多個方面。

這是我到目前爲止有：

<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

或以下對於'OR'查詢：

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

獲得這兩個選項之一現在可行（我最終要添加了一個選項，AND/OR搜索）

任何幫助或指針在正確的方向得到這個工作將是巨大的。

來源

2012-04-24 Rob

如果你使用PHP，它可能會期待一個查詢字符串，例如'？主題[] = TOPIC1和主題[] =標題2＆話題[] = topic3＆模式=和'。讓我知道如果這是好的。 – 2012-04-24 20:58:17

嗨薩爾曼。如果我從多個選擇下拉列表中選擇一個值，那麼提交工作正常，第一個'？'被附加到URL。問題出現在多個選擇中，提交只需選擇最後一個值，然後加載該頁面... – Rob 2012-04-25 11:16:49

如果我從多個下拉菜單中選擇一個值，則提交工作正常，第一個'？'被添加到網址。如果我編輯$ output。=「「;要說$ output。=「」;然後這將創建urls像：domain.com/?topic=letterTOPIC1&topics=letterTOPIC2我希望我可以使用str_replace改變，但＆，+/etc是urlencoded，我找不到str_replace它們的方法。 – Rob 2012-04-25 11:23:24

當您提交表單，您可以建立與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')或ID $('form#yourID')。

$('select').val()將返回所選擇的值的陣列用於selet元件。應該按照與類別$('select.yourClass')或ID $('select#yourID')相同的方式進行限定。 JavaScript遍歷數組，並將每個值附加到根URL http://domain.com/?topics=中，每個值之間有一個+。完成後，用戶將被重定向到新的URL。

來源

2012-04-24 21:05:07

嗨馬修 - 你可以擴展一點我將如何實現這一點？我的JavaScript技巧很渺茫恐怕... – Rob 2012-04-25 11:13:45

這是jQuery。當提交頁面上的任何表單時，'$（'form'）。submit（function（）{}）'將被觸發。你可以使用像$（'form＃myFormID'）這樣的ID或像$（'form.myFormClass'）'這樣的類來限定它。 $（'select'）。val（）將返回select元素的值。您可以通過相同的方式獲得正確的資格。我會在我的示例中添加更多詳細信息。 – 2012-04-25 14:32:06

多重選擇 - 選上的jQuery的

回答

相關問題