Help with adding another scroll bar/effects to existing script

Help with adding another scroll bar/effects to existing script

I have a Search Form that works successfully, and is using this jQuery plug-in code:


  1. <script>
    $(document).ready(function(){
    $("select.ui-select").selectWidget({
    change: function(changes) {

    var channel_id = changes;
    var Parent = $('select[name=sub_category]').parent();

    Parent.html('<select  name="sub_category"><option value="All">Sub Category</option></select>');

    $.ajax({
    type: "POST",
    url: "/ajax.php",
    data: "channel_id="+channel_id,
    dataType: 'json',
    statusCode: {
    200: function(data) {
    for(i = 0; i < data.length; i ++) {
    $("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
    }
    }
    }
    });
    return changes;
    },
    effect: "slide",
    keyControl: true,
    speed: 200,
    scrollHeight: 120
    });
    });
    </script>

I've attached a few images for visual aid. SearchForm1.png shows the Search Form.

As you can see in (SearchForm2.png), when the Category is selected it drops down a list and the jquery scroll bar. 

After a Category is selected and then the Sub-Category is selected, the list comes down, but no jQuery scroll bar (SearchForm3.png).

I'm not sue, but this line:
  1. var Parent = $('select[name=sub_category]').parent();

maybe should be like this instead:

  1. var Parent = $('select[name=channel]').parent();

AND then some additional sub-category function should be added (maybe), something like this, possibly:

  1. function ??????????? ()
           {
               $('select[name= sub_category]').selectWidget({
                   change       : function (changes) {
                       return changes;
                   },
                   effect       : "slide",
                   keyControl   : true,
                   speed        : 200,
                   scrollHeight : 200
               });
           }
       
so, that the sub-category has its own scroll bar/effects.
I believe this script just needs the sub-category to have its own:
effect: "slide",
keyControl: true,
speed: 200,
scrollHeight: 120

I look forward to your thoughts/ideas/solutions.