Question

大家好，我试图让我的两个下拉菜单执行以下操作：

1）显示与所选选项匹配的小册子预览 2）将该预览作为pdf的链接

到目前为止，在Stack Overflow用户的帮助下，我的jQuery代码如下所示：

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();
}

});

这是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>

我遇到了一些问题：

1）我的language变量不起作用。在javaScript控制台中，它显示为空字符串 "" ，但在控制台中调用$(".added option:selected").text();会返回所选内容的字符串。除了每次都拨打长手之外，我不知道如何解决这个问题。

2）由于动态创建了下拉菜单，因此我不知道每次选择新选项时如何设置href或src等属性，因为没有现有代码从中提取属性。这让我明白，我需要使我的功能首先创建下拉菜单更健壮。我是否必须添加对应于不同src或href值的更多数组？

类似的东西：

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上一个问题，抱歉，我还不知道如何运行这个小代码片段。

Answer 1

您的language变量设置在代码的开头，所以此时您要获取的元素不存在且语言的值为""，您需要设置变量更改<select>值时的值。

希望这可以帮助你，如果没有指导我，我可以帮助你。

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

下拉菜单向动态创建的选项添加属性

1 个答案: