從三個select元素構造一個搜索字符串？

我試圖構建一個搜索表單，並在wordpress上搜索從表單中獲取兩個select元素的值。任何人都知道嗎？我必須使用JS，AJAX或兩者嗎？任何幫助，將不勝感激。從三個select元素構造一個搜索字符串？

function categories_header_form() 
{ 
?> 
    <div id="header-form"> 
    <h3 class="form-title"> 
     <?php echo 'Αναζήτηση προϊόντων ανά περιοχή' ?> 
    </h3> 
    <form id="search-form" action="<?php bloginfo('url'); ?>" method="get" > 
     <div class="form-container"> 

     <?php nomoi(); ?> 

     <?php products_selection(); ?> 

     <button type="submit" class="button" id="search-form-button">Εύρεση</button> 
     </div> 
    </form> 
    </div> 
<?php 
} 

function products_selection() 
{ 
    $args = array(
     'post_type' => 'seller', 
     'taxonomy' => 'category', 
     'hide_empty' => 0, 
     'exclude'  => 1,1078,1079 
    ); 
    $products = get_categories($args); 

    if ($products) { 
    echo '<select id="products-select">'; 
     echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>'; 

     foreach ($products as $product) { 
     echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>'; 
     } 
    echo '</select>'; 
    } 
} 

function nomoi() 
{ 
    $args = array(
    'post_type' => 'seller', 
    'taxonomy' => 'nomos', 
    'hide_empty'=> 0, 
    'parent' => 0 
); 

    $categories = get_categories($args); 

    if ($categories) { 
    echo '<select id="nomoi-select" name="nomoi">'; 
     echo '<option selected="selected" disabled="disabled"><span>Νομοί</span></option>'; 

     foreach ($categories as $category) { 
     $id = $category->term_id; 
     $name = $category->name; 
     echo '<option class="nomos" id="'. $id .'">'. $name .'</option>'; 
     } 
    echo '</select>'; 
    echo '<select id="town-select" name="towns">'; 
     echo '<option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span></option>'; 
    echo '</select>'; 
    } 
}

這是我的搜索表單以及select標籤。我是JS和AJAX的入門者，不知道如何正確執行查詢。第二個選擇字段通過AJAX填充

來源

2015-07-28 vagelis

我一直沒能構造查詢呢。在它上面工作。 – vagelis

要明確，你需要從表單中的兩個選擇元素的值？ – colecmc

以下是您可以執行此操作的一種方法。監聽對所選元素的更改並保存值。然後使用搜索查詢中的值。

(function(doc, undefined) { 
 

 
    /** these 2 var must be available to the whole function */ 
 
    var el1, el2; 
 

 
    var getSelectedValue = function(el) { 
 
    /** 
 
    * @params {object} el - HTML Element 
 
    * @returns {string} 
 
    */ 
 
    return el.selectedOptions[0].value; 
 
    }; 
 

 
    var getSearchString = function(select1, select2) { 
 
    /** 
 
    * @params {object} el1 - HTML Element 
 
    * @params {object} el2 - HTML Element 
 
    * @returns {string} 
 
    */ 
 
    return [getSelectedValue(select1), getSelectedValue(select2)].join(' '); 
 
    }; 
 

 
    function delegator(event) { 
 
    /** 
 
    * @params {object} - Event Object 
 
    * When change event occurs, evaluate the definition of el1 and el2. 
 
    * Assign value to el1 if assigned already. 
 
    * If el1 is assigned, check value of el2 and assign. 
 
    * If both have valid assignments to the objects we need, then we can get the search string. 
 
    */ 
 
    switch (event.type) { 
 
     case 'change': 
 
     if (el1 === undefined && el2 === undefined) { 
 
      el1 = event.target; 
 
     } else if (el1 instanceof HTMLSelectElement && el2 === undefined) { 
 
      el2 = event.target; 
 
     } 
 
     if (el1 instanceof HTMLSelectElement && el2 instanceof HTMLSelectElement) { 
 
      doc.getElementById('search').setAttribute('value', getSearchString(el1, el2)); 
 
     } 
 
     break; 
 
    } 
 

 
    } 
 
    doc.addEventListener('change', delegator, false); 
 
}(document, undefined));

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Get Search String</title> 
 
</head> 
 

 
<body> 
 

 

 
    <form id="my-select-form" name="my-select-form"> 
 
    <select id="products-select"> 
 
     <option selected="" disabled="" value="0"><span>Προϊόντα</span> 
 
     </option> 
 
     <option class="product-name" id="product_term_id">product_name</option> 
 
    </select> 
 

 
    <select id="nomoi-select" name="nomoi"> 
 
     <option selected="selected" disabled="disabled"><span>Νομοί</span> 
 
     </option> 
 
     <option class="nomos" id="id">name</option> 
 
    </select> 
 

 
    <select id="town-select" name="towns"> 
 
     <option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span> 
 
     </option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
    </select> 
 
    </form> 
 

 
    <form id="my-search-form"> 
 
    <input id="search" type="search" /> 
 
    </form> 
 

 
</body> 
 

 
</html>

來源

2015-07-28 16:28:38 colecmc

對不起，合作。三個選擇元素。我會給它一個去讓你知道！感謝您的時間！！ – vagelis

您應該可以擴展邏輯，只需遵循該模式，聲明一個var並查找未定義的。 – colecmc

非常感謝您的幫助colecmc！ – vagelis

從三個select元素構造一個搜索字符串？

回答

相關問題