0

我目前正在尝试基于多个下拉菜单创建搜索。

我使用的片段如下：

    <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="search.html?submit=Go&_nkw">
        <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="submit" id="searchsubmit" value="Search" />
      </div>
    </form>

然而结果是不正确的——我想要实现的是以这种方式显示的结果：

    http://mystore.com/search.html?submit=Go&_nkw=medium+red

有没有人知道如何让这个替换刺固定并正常工作？

一些建议将不胜感激 - 非常感谢您！

4

1 回答 1

1

好吧，你只需要一个简单的技巧。首先从<select>标签中取出这些标签，并用名称和（这就是元素的工作方式）<form>制作两个假的：<input>submit_nkw<form>

<!DOCTYPE html>
<html>
<body>

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

      <div>
        <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>
        </br>
        <form role="search" method="get" id="searchform" action="search.html">
            <input name="submit" value="Go" style="visibility:hidden;"></label>
            <input id="search_criteria" name="_nkw" value="" style="visibility:hidden;"></label>
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
      </div>

</body>
</html>
于 2012-06-09T08:20:31.453 回答