I’ve got a few drop-downs that I’ve added filtering on the drop-down – start typing and you’ll 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 the categories
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
echo " <div class=\"row\">\n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
echo " <span><strong>Animal Category:</strong></span>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
echo " <select name=\"strAnimalType\" id=\"strAnimalType\" readonly/> \n";
echo " <option class=\"NoSelection\" value=\"-----\">-----</option>\n";
echo " <option class=\"Feline\" value=\"201\">Feline</option>\n";
echo " <option class=\"Canine\" value=\"202\">Canine</option>\n";
echo " <option class=\"Equine\" value=\"203\">Equine</option>\n";
echo " <option class=\"Other\" value=\"204\">Other</option>\n";
echo " </select>\n";
echo " </div>\n";
echo " </div>\n";
And here’s the drop-down selector I want to filter based on category — there are a lot of options. The class for each option includes the category selectors that will include the option in the drop-down.
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
echo " <div class=\"row\">\n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
echo " <span><strong>Pet Breed:</strong></span>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
echo " <select name=\"strPetBreed\" id=\"strPetBreed\" readonly/> \n";
echo " <option value=\"-----\" class=\"selectors All\">-----</option>\n";
echo " <option value=\"101\" class=\"selectors Feline\">Domestic Shorthair</option>\n";
echo " <option value=\"1275\" class=\"selectors Feline\">Flame Point Siamese</option>\n";
echo " <option value=\"1069\" class=\"selectors Equine\">Arabian</option>\n";
echo " <option value=\"1071\" class=\"selectors Equine\">Tennessee Walking Horse</option>\n";
echo " <option value=\"1072\" class=\"selectors Other\">Chicken</option>\n";
echo " <option value=\"1073\" class=\"selectors Other\">Snake</option>\n";
echo " <option value=\"1074\" class=\"selectors Canine\">Australian Shepherd</option>\n";
echo " <option value=\"1075\" class=\"selectors Feline\">Burmese</option>\n";
echo " <option value=\"1076\" class=\"selectors Canine\">Siberian Husky</option>\n";
echo " <option value=\"1077\" class=\"selectors Feline\">Sphinx</option>\n";
echo " <option value=\"1078\" class=\"selectors Other\">Rabbit</option>\n";
echo " </select>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
In the JavaScript, I’ve got a quick function that repopulates the rather long drop-down menu based on the selected category
// Filter strPetBreed options based on strAnimalCategory value
$(document).ready(function () {
var allOptions = $('#strPetBreedoption')
$('#strAnimalCategory').change(function () {
$('#strPetBreed option').remove()
var classN = $('#strAnimalCategory option:selected').prop('class');
var optsCat = allOptions.filter('.' + classN);
$.each(optsCat, function (i, j) {
$(j).appendTo('#strPetBreed');
});
var optsAll = allOptions.filter('.All');
$.each(optsAll, function (i, j) {
$(j).prependTo('#strPetBreed');
});
});
});
Since it’s possible there are options you’d want to always appear (in my case, it’s just the “—–” to indicate no selection has been made … but there could be real items that fall into each category too), I’ve got an “All” classification that will get popped onto the top of the list.