JSFiddle - React, Tailwind, and code Playground

by Gerardo Ramirez

HTML

<div id="docSelectBox" class="clearfix">

        <h3>Select a Brochure</h3>
        <select id="docs">
            <option selected disabled>- 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>
        <select class="language">
        <option>Select document</option>
        </select>
        <h3>PDF</h3>
        <div id="brochure">
        
        </div>
    </div>

JavaScript

var $brochureSelect = $("#docs");
var $languageSelect = $(".language");
var brochure = $("#docs option:selected").text();

$(function(){
 var map = {
"eng" : "English",
"esp" : "Español",
"kor" : "한국어",
"viet" : "Tiếng Việt",
"chin" : "中文"
}

$brochureSelect.on("change", function(){
$(".language").html("");
var selected = $("option:selected", this).attr("class");
var arr = selected.split(" ");
arr.forEach(function(e){
$(".language").prepend("<option>"+map[e]+"</option>");



    });
  });
});

$brochureSelect.on("change", function(){

if ($("#docs option:selected").text().match("^-")){
    $("#langSelectBox #langs").hide();
} else {
    $("#langSelectBox #langs").show();
}
});
$languageSelect.on("change", function(){
  var language = $(".language").val();
  var file = "/folder/pdf1/" + language;
  var filename = "Book";
  $("#brochure").html("<a href='" + file + "'>" + filename +"</a>");
});