Замена строки несколькими раскрывающимися списками поиска

Question

Я сделал опцию поиска в раскрывающемся меню, когда посетители могут выбирать из нескольких слов и искать их.

Проблема в том, что с каждым словом добавляются дополнительные данные.

С одним словом это

/?s=keyword

С 2 словами это

/?s=keyword&sn=keyword2

но это должно быть

/?s=keyword+keyword2

Форма выглядит следующим образом

<form role="search" method="get" id="searchform" action="<?php bloginfo('siteurl'); ?>">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
Type
<select name='s' id='type' class='postform' >
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="dog">Dog</option>
  <option class="level-0" value="cat">Cat</option>
</select> 

Color
<select name='s' id='color' class='postform' >
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="red">red</option>
  <option class="level-0" value="white">white</option>
  <option class="level-0" value="green">green</option>
</select> 

   <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

Есть ли способ заменить & sn = на + ?

Я пытался

$_get = str_replace('&sn=', '+', $_get);

Но это не сработало.

Рабочий ответ был дан Wgaffa и есть, но он не работает с IE или Firefox: (

<script type="text/javascript" charset="utf-8">
    function add_criteria (el) {
        search = document.getElementById('search_criteria');
        search.value = document.getElementById('type').value + " " + document.getElementById('color').value;
    }
</script>

<form role="search" method="get" id="searchform" action="<?php bloginfo('siteurl'); ?>">
    <label class="screen-reader-text" for="s">Search for:</label>
Type
<select name='' id='type' class='postform' onchange="add_criteria(this);">
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="dog">Dog</option>
  <option class="level-0" value="cat">Cat</option>
</select> 

Color
<select name='' id='color' class='postform' onchange="add_criteria(this);">
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="red">red</option>
  <option class="level-0" value="white">white</option>
  <option class="level-0" value="green">green</option>
</select> 
   <input type="hidden" id="search_criteria" value="" name="s" />
   <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

Answer 1

Может быть способ сделать это с помощью javascript.

Добавить скрытое текстовое поле с именем "s" и переименовать поля выбора.

В каждом атрибуте select onchange вызывать javascript, которыйдобавляет значение текущего поля выбора в скрытое текстовое поле.

Когда форма отправлена, скрытое поле имеет значение "собака красный" и должно быть передано как? s = собака + красный

Ясейчас на работе, поэтому у вас нет времени на разработку примера кода.

<script type="text/javascript" charset="utf-8">
    function add_criteria (el) {
        search = document.getElementById('search_criteria');
        search.value = document.getElementById('type').value + " " + document.getElementById('color').value;
    }
</script>

<form role="search" method="get" id="searchform" action="test.html">
    <label class="screen-reader-text" for="s">Search for:</label>
Type
<select name='type' id='type' class='postform' onchange="add_criteria(this);">
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="dog">Dog</option>
  <option class="level-0" value="cat">Cat</option>
</select> 

Color
<select name='color' id='color' class='postform' onchange="add_criteria(this);">
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="red">red</option>
  <option class="level-0" value="white">white</option>
  <option class="level-0" value="green">green</option>
</select> 
   <input type="hidden" id="search_criteria" value="" name="s" />
   <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form> 

Возможно, он не совместим с кросс-браузерами (тестируется только в Firefox).И если Wordpress использует jQuery или другую библиотеку javascript, это можно упростить, но это общая идея.

Answer 2

Почему вы не называете «поля поиска»:

name='criteria[0]'
name='criteria[1]'
name='criteria[2]'

Поэтому каждому окну выбора присваивается имя criteria[n]

Когда вы отправляете форму, все они должны быть объединены вместев массиве php 'criteria' вы можете сделать:

implode('+', $_GET['criteria']);

Обратите внимание, что вы также можете назвать поля такими вещами, как criteria[] (без номера) или criteria['color'] и т. д. Например:

<form role="search" method="get" id="searchform" action="<?php bloginfo('siteurl'); ?>">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
Type
<select name='criteria[type]' id='criteria[type]' class='postform' >
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="dog">Dog</option>
  <option class="level-0" value="cat">Cat</option>
</select> 

Color
<select name='criteria[color]' id='criteria[color]' class='postform' >
  <option value='' selected='selected'>All</option>
  <option class="level-0" value="red">red</option>
  <option class="level-0" value="white">white</option>
  <option class="level-0" value="green">green</option>
</select> 

   <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>


    <?

if(isset($_GET['criteria'])){echo implode('+', $_GET['criteria']);}

    ?>