OL Learn

Show elements based on Dropdown List


#1

This document has multiple onclick=“toggleExpand();”'s that are pulling in Snippets. The first onclick=“toggleExpand();” has a drop down list and based on what is selected in that drop down list (Section2, Section3, Section4), I would like additional fields to show from that snippet and also other onclick=“toggleExpand();”'s on the form.

Everything is based on that first drop down.

Can someone guide me on how to set up the script? This is what I have and it is hiding the selectors, but that is expected, because I don’t think I have it written correctly.

Selector: #div6, #div6header, #additionaldropdown

var mysnippet = loadhtml(‘snippets/Static.html’,’#firstselection’);

if (mysnippet == “Section2”) {

results.attr("data-conditional", "");

results.show();

} else {

results.hide();

}


#2

You will probably need to use the onchange function for the dropdown list but in essence you want to call it with the query method in the api, also I cant see how mysnippet will ever equal “Section2” as you are setting it to the content of Static.html and pulling the element with the id of firstselection, unless of course the content of that element is “Section2”?

Assuming it is you would need to do the following, however this is just showing the element that you have already declared you want to load so Im a bit confused…

var mysnippet = loadhtml('snippets/Static.html','#firstselection');

if (mysnippet == "Section2") {
    query(#firstselection).show();
} else {  
query(#firstselection).hide();
}