Pass ClientSide Value to Sling:Include

Hello,

I have a business requirement to dynamically load content in a page based on the changes of a dropdown list. My client has 100+ pricing elements that would need to be loaded based on the visitor’s selection of a dropdown list. Instead of having my Authors create 100+ separate pages for each pricing element, it seems more efficient to simply create a generic page (with header, footer, content that applies to all pages) and dynamically load the pricing elements somewhere in the page body.

What I’m struggling to understand is how to pass the visitor’s selection of the dropdown list (JavaScript against the dropdown’s onchange event seems like the most appropriate) to CQ’s sling:include function to load the appropriate CQ page.

In the dropdown list, I can create the Text | Value pair something like this:

Content1 | /content/myproject/content1
Content2 | /content/myproject/content2
Content3 | /content/myproject/content3

From there, I’m thinking I would use JavaScript and the dropdown list’s onchange event to get the appropriate page URL value and pass it to “mypage.html” and use the sling:include function to load that content inside of the page body.  My questions are:

1. How to I pass the client side value (e.g., /content/myproject/content1) to CQ’s sling:include function so that it’s dynamic?
2. How do I ensure that when mypage.html is loaded, the CQ dispatcher’s caching mechanism doesn’t cache this dynamic content?

Thanks in advance for any assistance.