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

By: Priyanka
Updated: January 1st, 2018 | Technology: CMS System, Orchard CMS

How-to-Create-the-Alternates-in-Orchard-CMS-1

Hi Developers,

Today I am sharing with you my recent experience with orchard. There is one challenging thing which I did is display lists as per dropdown values. Like if I change or I choose one of the dropdown value then it will show some lists regarding that value.

Problem:

I had task during my project in Orchard CMS. The task was display lists depends on dropdown value also another extendable task was to display one or more lists depends 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 dropdown. So, this can be done by choosing Enumeration Field in Field Type and Change in Setting for that. Check Snapshot.

Now, Check Steps:

Steps:

First of all, make new ContentType. Add 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 which you want to display
2. List Mode
Options in List mode as you show in below Screenshot have some meaning.
1. Dropdown List: Use when need to choose only one option from Dropdown.
2. Radio Button List: Use when need to choose only one option but in Radio button manner.
3. ListBox: Use when need to choose multiple options from Dropdown.
4. CheckBox: Use when Need to choose multiple options but in Checkbox manner.
From now on I am taking ListBox Listmode You can choose any of them.
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”.
Publish it and after that choose your alternative page and Make Perfect View.
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 Dropdown Change event add Jquery code to the footer:
Copy to Clipboard
[javascript] $(“#categories”).on(“change”, function () { changeList(); }); //.toLowerCase().trim().split(“;”) function changeList() { $(“.CategoryList”).each(function (index) { var listitems = $(this).attr(“data-category”).toLowerCase().trim(); if (listitems.indexOf($(“#categories”).val().toLowerCase().trim()) > -1 || $(#x27;#categories#x27;).val().toLowerCase() == “all”) { $(this).show(); } else { $(this).hide(); } }); } $(document).ready(function () { changeList(); }) [/javascript]

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 onchange event. After that changeList function is defined.
There is one for each loop is taken of the “CategoryList” class which is given to the List. In 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.