Help wanted with jQuery drop-down list plug-in

JavaScript
1

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.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.