1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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