перемещение scroll'а вправо внутри div'а
 

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

Помогите решить проблему, никак не получается сдвинуть автоматически скроллер направо, когда появляется четвертый блок 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 я не силен

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

... и десятый и сотый
:write:

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
(function (a, h, k, l) {
    a.fn.chained = function (e, f) {
        a.extend({}, a.fn.chained.defaults, f);
        return this.each(function () {
            var b = this,
                f = a(b)
                    .clone();
            a(e)
                .each(function () {
                    a(this)
                        .bind("change", function () {
                            a(b)
                                .html(f.html());
                            var c = "";
                            a(e)
                                .each(function () {
                                    c += "\\" + a(":selected", this)
                                        .val()
                                });
                            var c = c.substr(1),
                                d = a(e)
                                    .first(),
                                g = a(":selected", d)
                                    .val();
                            a("option", b)
                                .each(function () {
                                    a(this)
                                        .hasClass(c) || a(this)
                                        .hasClass(g) || "" === a(this)
                                        .val() || a(this)
                                        .remove()
                                });
                            1 === a("option", b)
                                .size() && "" === a(b)
                                .val() ? a(b)
                                .hide() : (a(b)
                                    .show(), d = b.parentNode.scrollWidth - b.parentNode.offsetWidth, 0 < d && a(b)
                                    .parent()
                                    .scrollLeft(d));
                            a(b)
                                .trigger("change")
                        });
                    a("option:selected", this)
                        .length || a("option", this)
                        .first()
                        .attr("selected", "selected");
                    a(this)
                        .trigger("change")
                })
        })
    };
    a.fn.chainedTo = a.fn.chained;
    a.fn.chained.defaults = {}
  })(jQuery, window, document);
  </script>
  <script type="text/javascript">
jQuery(document).ready(function(){
             jQuery("#cats2").chained("#cats1");
             jQuery("#cats3").chained("#cats2");
             jQuery("#cats4").chained("#cats3");
  });
  </script>
</head>

<body>
  <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>
</body>
</html>

Работает, огромное спасибо!

Для меня этот фрагмент кода темный лес. А есть ли что-то такое в jQuery? И если есть, то каким запросом гуглить это?

а это не jQuery? это ваш код только добавлен скролл в право