A custom chained-select... a better way? Can't get ScrollTop working quite right
Hi everyone
I've built a kind of chained-select system using jquery and a couple of DIV elements.
http://thenetzone.co.uk/categorydemo/category.html
It works by having all the available categories loaded into the right-hand DIV as LI elements, but they are all hidden by default.
Any categories currently selected for that record are shown using an inline style declaration... done server-side from our database data before the page is sent to the user.
When a user clicks a category over from the left pane, jquery simply shows the matching LI in the right pane and adds a nice JqueryUI highlight to it for good measure.
As well as showing the matching LI, I also use .append to add a hidden input (<input type="hidden" name="categories[]" value="{id of category}" id="input_{id of category}" />) into my form which will get submitted when the user hits the submit button.
When the user clicks a category on the right pane, that LI element gets hidden and the hidden input removed from the DOM so it's no longer submitted with the form info.
Bit of a crazy idea but it seems to work well. And gives a better user experience than a conventional chained-select.
Here's my questions:
1) The only down-side is that there's a fair amount of hidden HTML that gets sent to the user and with 400 categories I guess that's about 400 event bindings that need to be set up by jquery.
Is that going to be a problem from a javascript/jquery perspective?
2) Rather than using .append / .remove to add/remove the hiden form input, would it be better to have all the form inputs already in the HTML code and just have jquery toggle the disabled attribute?
Or does it not make much difference?
3) I'd like to have the right-hand DIV auto scroll down/up to the category when one is shown out of view.
I've had a bit of a mess around with ScrollTop as you can see from the demo but I think I've got the usage slightly messed up.
Anyone got any suggestions on how to do it properly?
Cheers, B