I've designed a dropdown search option when site visitors can choose from the 3 words and check for your.

However , with every word extra information is added.

With a word it's

/?s=keyword

With 2 words it's

/?s=keyword&sn=keyword2

but it ought to be

/?s=keyword+keyword2

The shape is really as adopted

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

It is possible to method to replace &sn= with + ?

I've attempted

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

But that did not work.

The significant answer was handed by Wgaffa and it is, but it doesn't use IE or Opera :(

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

Why dont you title the 'search fields':

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

So each choose box is offered the title criteria[n]

Whenever you submit the shape they ought to be wrapped together inside a php array 'criteria', after that you can do:

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

Note you may also title the fields such things as criteria[] (no number), or criteria['color'] etc..eg:

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

    ?>