CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
m00saca
m00saca

Reputation: 363

Drop down menu adding attributes to options created dynamically

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.

Upvotes: 0

Views: 65

Answers (1)

Gerardo
Gerardo

Reputation: 979

Your language variable is set at the start of the code so at this point the element you want to get doesn't exist and the value of language is "", you need to set the variable value when you change the <select> value.

Hope this can help you, if not guide me and I can help you.

https://jsfiddle.net/geradrum/j6xxdpge/

Upvotes: 1

Related Questions