Help wanted with jQuery drop-down list plug-in and HTML Form

Discussion in 'JavaScript' started by chrisj, Aug 10, 2016.

  1. #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>
    Code (markup):
    I wanted it to look better, so I installed this JQuery drop-down menu plug-in:
    Custom Select Dropdown List Plugin For jQuery & jQuery UI | Free jQuery Plugins
    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>
    Code (markup):
    Any guidance on how to get them to work together will be appreciated.
     
    chrisj, Aug 10, 2016 IP
  2. SkylerCarson

    SkylerCarson Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    .selectWidget({
    change :

    shouldn't there be a comma to separate those fields? I'm not saying this is the answer or that it will work, but I always thought that the first argument was separated with a comma. .selectWidget({ change, function() { }}); May be wrong
     
    SkylerCarson, Aug 14, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    That is wrong - EACH argument/value pair is separated with a comma.
     
    PoPSiCLe, Aug 14, 2016 IP