|
Сообщение от cannabis
|
|
сдвинуть автоматически скроллер направо, когда появляется четвертый блок select, чтобы было видно четвертый блок полностью (возможен также и пятый блок)
|
... и десятый и сотый
<!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>