[cannabis]

Добрый день уважаемые,

Помогите решить проблему, никак не получается сдвинуть автоматически скроллер направо, когда появляется четвертый блок select, чтобы было видно четвертый блок полностью (возможен также и пятый блок)

HTML-код:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.chained.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
             jQuery("#cats2").chained("#cats1");
             jQuery("#cats3").chained("#cats2");
             jQuery("#cats4").chained("#cats3");
});
</script>


<form action="/my/category/action" method="post">

<div style="overflow-x: auto; width: 500px; height: 210px; white-space: nowrap;">
<select id="cats1" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
                <option value="296">Agriculture</option>
                <option value="297">Apparel</option>
                <option value="298">Automobiles & Motocycles</option>
</select>
<select id="cats2" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="344" class="296">Grain</option>
</select>
<select id="cats3" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="345" class="344">Rice</option>
</select>
<select id="cats4" size="10" name="primary_category_id[]">
  <option selected value="">Select category</option>
  <option value="354" class="345">Other Rice</option>
</select>

</div>

<br />
<button class="btn btn-primary">Change category</button>
</form>

jquery.chained.js:

/*
* Chained - jQuery non AJAX(J) chained selects plugin
*
* Copyright (c) 2010-2013 Mika Tuupola
*
* Licensed under the MIT license:
* [url]http://www.opensource.org/licenses/mit-license.php[/url]
*
* Project home:
* [url]http://www.appelsiini.net/projects/lazyload[/url]
*
* Version: 0.9.4
*
*/

;(function($, window, document, undefined) {
    "use strict";
    
    $.fn.chained = function(parent_selector, options) {
        
        var settings = $.extend( {}, $.fn.chained.defaults, options);
        
        return this.each(function() {
            
            /* Save this to self because this changes when scope changes. */
            var self = this;
            var backup = $(self).clone();
                        
            /* Handles maximum two parents now. */
            $(parent_selector).each(function() {
                                                
                $(this).bind("change", function() {
                    $(self).html(backup.html());

                    /* If multiple parents build classname like foo\bar. */
                    var selected = "";
                    $(parent_selector).each(function() {
                        selected += "\\" + $(":selected", this).val();
                    });
                    selected = selected.substr(1);

                    /* Also check for first parent without subclassing. */
                    /* TODO: This should be dynamic and check for each parent */
                    /* without subclassing. */
                    var first = $(parent_selector).first();
                    var selected_first = $(":selected", first).val();
                
                    $("option", self).each(function() {
                        /* Remove unneeded items but save the default value. */
                        if (!$(this).hasClass(selected) &&
                            !$(this).hasClass(selected_first) && $(this).val() !== "") {
                                $(this).remove();
                        }
                    });

                    /* If we have only the default value disable select. */
                    if (1 === $("option", self).size() && $(self).val() === "") {
                        $(self).hide();
                    } else {
                        $(self).show();
                    }
                    $(self).trigger("change");
                });
                
                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }
      
                /* Force updating the children. */
                $(this).trigger("change");

            });
        });
    };
    
    /* Alias for those who like to use more English like syntax. */
    $.fn.chainedTo = $.fn.chained;
    
    /* Default settings for plugin. */
    $.fn.chained.defaults = {};
    
})(jQuery, window, document);

гуглинг ничего не дал подходящего, в самом JS я не силен

заранее благодарен за ответы