I\u2019ve got a few drop-downs that I\u2019ve added filtering on the drop-down \u2013 start typing and you\u2019ll see the options that match your string. But I needed to mirror an application functionality where you select a category and are then presented with a list of options that fit the category.<\/p>\n\n\n\n
Here’s the drop-down selector for the categories<\/p>\n\n\n
\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"col-md-12 col-sm-12 col-lg-12 col-xs-12\\">\\n";\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\\">\\n";\n echo " <span><strong>Animal Category:<\/strong><\/span>\\n";\n echo " <\/div>\\n";\n echo " <div class=\\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\\">\\n";\n echo " <select name=\\"strAnimalType\\" id=\\"strAnimalType\\" readonly\/>\u00a0\\n";\n echo " <option class=\\"NoSelection\\" value=\\"-----\\">-----<\/option>\\n";\n echo " <option class=\\"Feline\\" value=\\"201\\">Feline<\/option>\\n";\n echo " <option class=\\"Canine\\" value=\\"202\\">Canine<\/option>\\n";\n echo " <option class=\\"Equine\\" value=\\"203\\">Equine<\/option>\\n";\n echo " <option class=\\"Other\\" value=\\"204\\">Other<\/option>\\n";\n echo " <\/select>\\n";\n echo " <\/div>\\n";\n echo " <\/div>\\n";\n<\/pre><\/div>\n\n\nAnd here’s the drop-down selector I want to filter based on category — there are a lot<\/em> of options. The class for each option includes the category selectors that will include the option in the drop-down. <\/p>\n\n\n\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"col-md-12 col-sm-12 col-lg-12 col-xs-12\\">\\n";\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"row\\">\\n";\n echo " <div class=\\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\\">\\n";\n echo " <span><strong>Pet Breed:<\/strong><\/span>\\n";\n echo " <\/div>\\n";\n echo " <div class=\\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\\">\\n";\n echo " <select name=\\"strPetBreed\\" id=\\"strPetBreed\\" readonly\/>\u00a0\\n";\n echo " <option value=\\"-----\\" class=\\"selectors All\\">-----<\/option>\\n";\n echo " <option value=\\"101\\" class=\\"selectors Feline\\">Domestic Shorthair<\/option>\\n";\n echo " <option value=\\"1275\\" class=\\"selectors Feline\\">Flame Point Siamese<\/option>\\n";\n echo " <option value=\\"1069\\" class=\\"selectors Equine\\">Arabian<\/option>\\n";\n echo " <option value=\\"1071\\" class=\\"selectors Equine\\">Tennessee Walking Horse<\/option>\\n";\n echo " <option value=\\"1072\\" class=\\"selectors Other\\">Chicken<\/option>\\n";\n echo " <option value=\\"1073\\" class=\\"selectors Other\\">Snake<\/option>\\n";\n echo " <option value=\\"1074\\" class=\\"selectors Canine\\">Australian Shepherd<\/option>\\n";\n echo " <option value=\\"1075\\" class=\\"selectors Feline\\">Burmese<\/option>\\n";\n echo " <option value=\\"1076\\" class=\\"selectors Canine\\">Siberian Husky<\/option>\\n";\n echo " <option value=\\"1077\\" class=\\"selectors Feline\\">Sphinx<\/option>\\n";\n echo " <option value=\\"1078\\" class=\\"selectors Other\\">Rabbit<\/option>\\n";\n echo " <\/select>\\n";\n echo " <\/div>\\n";\n echo " <\/div>\\n";\n echo " <\/div>\\n";\n echo " <\/div>\\n";\n echo " <\/div>\\n";\n\n<\/pre><\/div>\n\n\nIn the JavaScript, I’ve got a quick function that repopulates the rather long drop-down menu based on the selected category<\/p>\n\n\n
\n\/\/ Filter strPetBreed options based on strAnimalCategory value\n$(document).ready(function () { \n var allOptions = $('#strPetBreedoption')\n $('#strAnimalCategory').change(function () {\n $('#strPetBreed option').remove()\n\n var classN = $('#strAnimalCategory option:selected').prop('class');\n var optsCat = allOptions.filter('.' + classN);\n $.each(optsCat, function (i, j) {\n $(j).appendTo('#strPetBreed');\n });\n\n var optsAll = allOptions.filter('.All');\n $.each(optsAll, function (i, j) {\n $(j).prependTo('#strPetBreed');\n });\n\n });\n});\n\n<\/pre><\/div>\n\n\nSince it\u2019s possible there are options you\u2019d want to always<\/em> appear (in my case, it\u2019s just the \u201c—–\u201d to indicate no selection has been made \u2026 but there could be real items that fall into each category too), I\u2019ve got an \u201cAll\u201d classification that will get popped onto the top of the list.<\/p>\n","protected":false},"excerpt":{"rendered":"I\u2019ve got a few drop-downs that I\u2019ve added filtering on the drop-down \u2013 start typing and you\u2019ll see the options that match your string. But I needed to mirror an application functionality where you select a category and are then presented with a list of options that fit the category. Here’s the drop-down selector for …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[45,765,856,854],"class_list":["post-6459","post","type-post","status-publish","format-standard","hentry","category-coding","tag-coding","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6459"}],"version-history":[{"count":7,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6459\/revisions"}],"predecessor-version":[{"id":7779,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6459\/revisions\/7779"}],"wp:attachment":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}