Hello everyone I'm trying to get my two drop down menus to do the following:
1) Display a preview of the brochure that matches the selected options 2) Have that preview be a link to a pdf
So far with the help of Stack Overflow users my jQuery code looks like this:
var $brochureSelect = $("#docs");
var brochure = $("#docs option:selected").text();
var language = $(".added option:selected").text();
$(function(){
var map = {
"eng" : "English",
"esp" : "Español",
"kor" : "한국어",
"viet" : "Tiếng Việt",
"chin" : "中文"
}
$brochureSelect.on("change", function(){
var selected = $("option:selected", this).attr("class");
var arr = selected.split(" ");
$(".added").remove()
$("#langs").append("<select class='added'>")
arr.forEach(function(e){
$(".added").append("<option>"+map[e]+"</option>");
});
});
});
$brochureSelect.on("change", function(){
if ($("#docs option:selected").text().match("^-")){
$("#langSelectBox #langs").hide();
} else {
$("#langSelectBox #langs").show();
}
});
And this is the HTML:
<div id="docSelectBox" class="clearfix">
<h3>Select a Brochure</h3>
<select id="docs">
<option>- Choose a document to preview -</option>
<option id="specEd" class="eng kor viet esp chin">Special Education Programs</option>
<option id="parRight" class="eng kor esp">Special Ed. Parents Rights</option>
<option id="cac" class="eng esp">CAC Brochure</option>
</select>
</div>
<div id="langSelectBox" class="clearfix">
<h3>Select a Language</h3>
<div id="langs">
</div>
</div>
I've run into a few problems:
1) my language variable isn't working. In the javaScript console it shows up as a blank string "" but calling $(".added option:selected").text(); in the console returns a string of whatever is selected. I don't know how to remedy this other than calling the long hand every single time.
2) Since the drop down menu is being created dynamically I don't know how to set attributes like href or src every time a new option is selected because there is no existing code to pull attributes from. That leads me to understand that I need to make my function that creates the drop down menus in the first place more robust. Would I have to add more arrays that correspond to different src or href values?
Something like:
map2 = {
brochure1. : "/folder/pdf1/language1", // language 1 is the default
brochure2 : "/folder/pdf2/language1",
brochure3 : "/folder/pdf3/language1"
}
//once brochure is selected then you can further change the preview based on the language selection
map3 = {
language1 : "/folder/pdf1/language1",
language2 : "/folder/pdf1/language2",
language3 : "/folder/pdf1/language3",
..etc..
}
Here is the link to my previous question, sorry I don't know how to run the little code snippet yet.
