How to Display List Depended on Drop-down Values in Orchard CMS?

Hi Developers,

Today I am sharing with you my recent experience with Orchard.

There is one challenging thing that I did was display lists as per dropdown values. Like if I change or I choose one of the dropdown values then it will show some lists regarding that value.

Problem:

I had a task during my project in Orchard CMS. The task was to display lists depending on dropdown value also another extendable task was to display one or more lists depending on dropdown value. I had completed it. Thus, I am sharing with you, It may be useful.

How the above things can be done..? Here is the solution for this.

Solution:

Orchard provides a by-default feature to display dropdowns. So, this can be done by choosing Enumeration Field in Field Type and Change in Setting for that. Check Snapshot.

Also read: How to Integrate Orchard CMS with Asp.Net MVCForum

Now, Check Steps:

Steps:

1. First of all, make a new ContentType. Add an Enumeration Field on any page or that ContentType. While Setting of this Field, There is two important settings you have to change.
   1. Add Values that you want to display
   2. List Mode

   Options in List mode as you show in the below Screenshot have some meaning.

   1. Dropdown List: Use when need to choose only one option from the Dropdown.
   2. Radio Button List: Use when need to choose only one option but in a Radio button manner.
   3. ListBox: Use when need to choose multiple options from the Dropdown.
   4. CheckBox: Use when Need to choose multiple options but in a Checkbox manner.

   From now on I am taking ListBox Listmode You can choose any of them.

   

2. Create Pages of the particular ContentType.
   In addition, While Creating the Page It will show the field when you select one or multiple options. Like, Check snapshot.In Listing1 Page I have Chosen print And Distribution as Categories List. The meaning of this is that “When You choose Print or Distribution, Listing1 Page is shown”.
3. Publish it and after that choose your alternative page and Make Perfect View.
4. While Rendering the List Give one Class Name to that for e.g. Here I take “CategoryList” as the Class of the List. and also give Enumeration Field value for e.g. Print, Distribution which we have chosen for Listing 1 page. As data- an attribute of that.
   For the Dropdown Change event add JQuery code to the footer:

   
   $(document).ready(function () {
   	// Initial call to change the list when the page loads
   	changeList();
   
   	// Event handler for category dropdown change
   	$("#categories").on("change", function () {
   		changeList();
   	});
   });
   
   function changeList() {
   	var selectedCategory = $("#categories").val().toLowerCase().trim();
   
   	$(".CategoryList").each(function () {
   		var listItems = $(this).attr("data-category").toLowerCase().trim();
   		if (listItems.indexOf(selectedCategory) > -1 || selectedCategory === "all") {
   			$(this).show();
   		} else {
   			$(this).hide();
   		}
   	});
   }

Source code Explanation:

• In the above code, one on-change event is taken of “categories” Id. The categories Id is showing the Dropdown list from where you can change the value. Like screenshot
  
• One Function named “changeList” is called on on change event. After that changeList function is defined.
• There is one for each loop taken of the “CategoryList” class which is given to the List. In the If else condition check the condition that if the value of data-attribute and the Id “category” value is matched then it will show the particular list otherwise hide it.
• Run the code and as a result, you will get this. That’s it.
  

Conclusion:

In conclusion, You can customize everything with the help of Orchard features furthermore you can make it more dynamic.

For more examples refer to this link: https://docs.orchardproject.net/en/latest/Documentation/Creating-lists/

Thank you for Reading!