tag:blogger.com,1999:blog-14039629.post2144257862883111645..comments2014-06-04T12:26:06.318-05:00Comments on Sasquatch Hunter: Cascading Select Boxes using jQueryAnonymoushttp://www.blogger.com/profile/10343329065777468116noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-14039629.post-65257118551716099792012-09-19T23:42:44.251-05:002012-09-19T23:42:44.251-05:00Thanks. I just had Organization and Territory sele...Thanks. I just had Organization and Territory select boxes and would like to change some code.There is "Organization 4" in Organization dropdown list, and no corresponding items in Territory select box, the Territory need to display "No result" . How can I do this? Thanks a lot.Bessynoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-77339542506861803902012-09-06T08:35:19.083-05:002012-09-06T08:35:19.083-05:00Lee,
Since we are binding the functionality to th...Lee,<br /><br />Since we are binding the functionality to the select using the .change() method, we can simply use the .change() method to trigger it after the correct option has been selected.<br /><br />ie,<br />$('.orgSelect option:eq(2)').attr("selected","selected");<br />$('.orgSelect').change();Anonymoushttps://www.blogger.com/profile/10343329065777468116noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-6041431407657648272012-09-05T19:09:32.961-05:002012-09-05T19:09:32.961-05:00Thank you. if registed value is setting as ex. ...Thank you. if registed value is setting as ex. 'terrSelect' is not change. How to solve this problem.<br /><br />ex) $('.orgSelect option:eq(2)').attr("selected","selected");Anonymoushttps://www.blogger.com/profile/16186484167718517995noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-57922349303586193272012-05-14T08:51:11.590-05:002012-05-14T08:51:11.590-05:00I would think adding something similar to thise sh...I would think adding something similar to thise should be sufficiant.<br /><br />officeSelect = cascadeForm.find('.officeSelect');<br /> <br />cascadeSelect(locSelect, officeSelect);Anonymoushttps://www.blogger.com/profile/10343329065777468116noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-19298363376368212862012-05-10T17:12:26.028-05:002012-05-10T17:12:26.028-05:00I was trying to put 1 more level in the cascading ...I was trying to put 1 more level in the cascading boxes, but not sure what exact code is needed.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-91784945586966655242011-12-10T20:53:32.100-06:002011-12-10T20:53:32.100-06:00Thanks ............
you really saves me. And the b...Thanks ............<br />you really saves me. And the best part is I can makes it work with option selected for editing needs.<br />once again, thanksAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-50157151120898336422011-12-08T14:52:16.121-06:002011-12-08T14:52:16.121-06:00Hi there -- this code is working great, but I'...Hi there -- this code is working great, but I'm no Javascript expert. Is there an easy way to have the last item selected show/hide a div? Thanks!Nicolehttps://www.blogger.com/profile/04300244110927156578noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-38531628903391361452011-11-30T11:09:18.287-06:002011-11-30T11:09:18.287-06:00"Perfect" is a bit generous, but glad it..."Perfect" is a bit generous, but glad it works you.Anonymoushttps://www.blogger.com/profile/10343329065777468116noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-18696130690993604412011-11-30T09:07:09.987-06:002011-11-30T09:07:09.987-06:00Perfect piece of code, works as advertised!Perfect piece of code, works as advertised!Erikhttp://www.zingiri.comnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-38300971906127844922011-10-19T18:03:30.388-05:002011-10-19T18:03:30.388-05:00This little piece of wonder works (Oct 19, 2011) i...This little piece of wonder works (Oct 19, 2011) in Firefox 7, Opera 11, Chrome 14 and IE4Linux. Thanks for making other people's life easier!<br /><br />Best,<br />RaulAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-2585621718435295082011-10-12T05:48:58.348-05:002011-10-12T05:48:58.348-05:00Thanks a lot, nice and neat.Thanks a lot, nice and neat.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-2735032852419469772011-09-26T23:37:39.643-05:002011-09-26T23:37:39.643-05:00Just what I needed. Thanks very much.Just what I needed. Thanks very much.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-34650985203448242062011-05-10T08:29:36.285-05:002011-05-10T08:29:36.285-05:00Ryan,
I'm not quite sure what you mean by &qu...Ryan,<br /><br />I'm not quite sure what you mean by "This won't work with spaces." <br /><br />Class names cannot contain spaces. Having a class attribute with spaces in it gives that element one separate class for each word. <br /><br />For the value attribute of the select, I tend to use primary keys from a database and believe that generally, but maybe not always, primary keys shouldn't contain spaces either.<br /><br />Maybe you have something else in mind for your use case, but I hope this will clears it up a bit.Anonymoushttps://www.blogger.com/profile/10343329065777468116noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-85791233355355012542011-05-10T00:53:04.344-05:002011-05-10T00:53:04.344-05:00This won't work with spaces, any suggestions?This won't work with spaces, any suggestions?Ryan Wardhttps://www.blogger.com/profile/06340655588316207769noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-53598220549009493012011-04-14T10:26:21.745-05:002011-04-14T10:26:21.745-05:00Does anyone know how to make this code with with M...Does anyone know how to make this code with with Mobile Safari's "next" button when in form mode? When a selection is made, the next field is not updated unless you close the chooser. In other words, the "next" button breaks the script.Callawayhttps://www.blogger.com/profile/04897567319278401165noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-17031809342946168102010-11-20T14:51:57.049-06:002010-11-20T14:51:57.049-06:00Haven't tested this extensively, but this soun...Haven't tested this extensively, but this sounds like the direction you want to go. Should get you started anyway.function cascadeSelect(parent, child){<br /> var childOptions = child.find('option:not(.static)');<br /> child.data('options',childOptions);<br /> <br /> parent.change(function(){<br /> childOptions.remove();<br /> if(this.value > 0){<br /> newOptions = child.data('options').filter('.sub_' + this.value);<br /> }else{<br /> newOptions = child.data('options');<br /> }<br /> child<br /> .append(newOptions)<br /> .change();<br /> })<br /> <br /> //childOptions.not('.static, .sub_' + parent.val()).remove();<br />}Anonymoushttps://www.blogger.com/profile/10343329065777468116noreply@blogger.comtag:blogger.com,1999:blog-14039629.post-62419958004446330522010-11-20T10:09:47.510-06:002010-11-20T10:09:47.510-06:00Thanks, super helpful. Is there an easy way to cha...Thanks, super helpful. Is there an easy way to change the code to act more like a filter than a menu, i.e. instead of hiding by default all options are shown and then once a parent is select the children are filtered accordingly?Krishttp://www.noblehill.comnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-17150733200707610322010-07-28T04:40:58.786-05:002010-07-28T04:40:58.786-05:00Just what I was after, thanks for sharingJust what I was after, thanks for sharingAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-14039629.post-64020738604810231202010-06-22T19:33:25.413-05:002010-06-22T19:33:25.413-05:00Nice work this.Nice work this.Matt Doarhttps://www.blogger.com/profile/02360651363519410698noreply@blogger.com