I had a need to modify the options on a DDL based on different selections the user had made on the page. I did this at runtime by passing in a list of menu items in the ViewBag and using javascript to add and remove items based on the users selections.
Step 1: Create a ViewBag Dictionary <string, string> object that contains the full list of possible menu items.
ViewBag.MenuItems = new Dictionary<string, string> { {"option1", "Option One"}, {"option2", "Option Two"}, {"option3", "Option Three"}, {"optionShowMe", "Option Show Only Me"}, };
Step 2: Create a javascript function that will insert an item into the DDL
function AddItem(Text,Value) { // Create an Option object var opt = document.createElement("option"); // Add an Option object to Drop Down/List Box document.getElementById("DropDownList").options.add(opt); // Assign text and value to Option object opt.text = Text; opt.value = Value; }
Step 3: Create a method that will filter the options based on the users selection
function FilterDropDownListItems() { var array = @(Html.Raw(Json.Encode(ViewBag.MenuItems))); var userSelectedOption = $('#UserDDL').val(); $("#DropDownList").empty(); if (userSelectedOption === '140') { for (var val in array) { if(val === 'optionShowMe') AddRequestTypeItem(array[val], val); } $('#DropDownList').val('optionShowMe'); } else { AddRequestTypeItem('Please Select', ''); for (var val in array) { if(val != 'optionShowMe') AddRequestTypeItem(array[val], val); } $('#DropDownList').val(''); } }