Question

当访问者可以从多个单词中进行选择并搜索时，我提供了一个下拉搜索选项。

问题在于，每个单词都会添加额外的数据。

用一个词就是

/?s=keyword

有两个字就是

/?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>

有没有办法用 + 替换＆amp; 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

为什么不命名'搜索字段'：

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']);}

    ?>

Answer 2

使用javascript可能有办法做到这一点。

添加名为“s”的隐藏文本框，并重命名选择框。

在每个select onchange属性上调用一个javascript，将当前选择框的值添加到隐藏文本框中。

提交表单时，隐藏框的值为“dog red”，应该传递为？s = dog + red

我现在在工作，所以没有时间编写代码示例。

<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>

这可能不兼容crossbrowser（仅在firefox中测试）。如果Wordpress使用jQuery或其他javascript库，这可以简化，但这是一般的想法。

字符串替换为多个下拉搜索框

2 个答案: