I have this Search Form that works successfully:
<form method="get" action="../search.php" name="myForm" />
<select size="1" name="channel" class="dropdown_box" />
<option value="All">All</option>
<option value="4">Channel-2</option>
<option value="6">Channel-4</option>
</select>
<select size="1" name="sub_category" class="dropdown_box" />
<option value="All">Sub Category</option>
</select>
<input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />
<input type="submit" value="SUBMIT"/>
</form>
I wanted it to look better, so I installed this JQuery drop-down menu plug-in:
And I’m trying to combine them.
Here’s essentially the jQuery code:
<form action="" method="get">
<table>
<tr>
<td>
<h3>1. SELECT CATEGORY</h3>
<select name="drop1" class="ui-select">
<!--<select size="1" name="channel" class="dropdown_box" />-->
<option value="">Choose One</option>
<option value="2">ALL</option>
<option value="4">Channel-2</option>
<option value="6">Channel-4</option>
</select>
</td>
<td>
<h3>2. ENTER SEARCH WORDS</h3>
<select name="drop2" class="ui-select">
--- Add Search Field Box --
</select>
</td>
<td>
<h3>2. CHOOSE CATEGORY</h3>
<select name="drop2" class="ui-select">
--- Add SubCategories --
</select>
</td>
</tr>
</form>
<script>
$(document).ready(function(){
$(".ui-select").selectWidget({
change : function (changes) {
return changes;
},
effect : "slide",
keyControl : true,
speed : 200,
scrollHeight : 250
});
});
</script>
Any guidance will be appreciated.