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>2 つの偽物を作成します (これが要素の仕組みです)。<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 に答える