第三个下拉菜单影响第一个和第二个下拉菜单

Question

请注意，我从本网站的另一个问题中获得了这个脚本，我想将它用于我的项目。我想要完成的是，如果选择了 English 和 The Indian Express，那么它将在第三个下拉列表中显示要访问的页面列表。如果选择了印度教，那么第三个下拉列表中将出现一组不同的页面。这是我拥有的：

<script type='text/javascript'>//<![CDATA[ 

function SetMedia(objLanguage) {
    var objMedia = document.getElementById("media");
    objMedia.options.length = 0;
        objMedia.disabled = false;
switch (objLanguage.value) {
    case "English":
    objMedia.options.add(new Option("The Indian Express"));
    objMedia.options.add(new Option("The Hindu"));
    break;
case "Tamil":
    objMedia.options.add(new Option("Tamil Paper 1"));
    objMedia.options.add(new Option("Tamil Paper 2"));
    break;
case "Telugu":
    objMedia.options.add(new Option("Telugu Paper 1"));
    objMedia.options.add(new Option("Telugu Paper 2"));
    break;
default:
    objMedia.options.add(new Option("select"));
    objMedia.disabled = true;
    break;
}

}
function Setpage(objLanguage) {
var objMedia = document.getElementById("page");
objMedia.options.length = 0;
    objMedia.disabled = false;
switch (objLanguage.value) {
case "The Hindu":
    objMedia.options.add(new Option("Page 32"));
    objMedia.options.add(new Option("Page 36"));
    break;
case "The Indian Express":
    objMedia.options.add(new Option("Page 40"));
    objMedia.options.add(new Option("Page 65"));
    break;
default:
    objMedia.options.add(new Option("select"));
    objMedia.disabled = true;
    break;
}

}
//]]>  

</script>


</head>
<body>
<select name="language" id="language" onchange="SetMedia(this)">
<option>select</option>
<option >English</option>
<option>Tamil</option>
<option>Telugu</option>
</select>

<select name="media" id="media" disabled="disabled">
<option>select</option>
</select>
<select name="page" id="page" onchange="Setpage"disabled="disabled">
<option>select</option>
</select>

</body>


</html>

Answer 1

您需要为

设置 onchange="Setpage"

<select name="media" id="media" disabled="disabled">

像这样：

<select name="media" id="media" onchange="Setpage(this)" disabled="disabled">

还要确保在该函数中也将 disabled 设置为 false：

function SetMedia(objLanguage) {
    var objMedia = document.getElementById("media");
    objMedia.options.length = 0;
        objMedia.disabled = false;
switch (objLanguage.value) {
    case "English":
    objMedia.options.add(new Option("choose"));
    objMedia.options.add(new Option("The Indian Express"));
    objMedia.options.add(new Option("The Hindu"));
    break;
case "Tamil":
    objMedia.options.add(new Option("Tamil Paper 1"));
    objMedia.options.add(new Option("Tamil Paper 2"));
    break;
case "Telugu":
    objMedia.options.add(new Option("Telugu Paper 1"));
    objMedia.options.add(new Option("Telugu Paper 2"));
    break;
default:
    objMedia.options.add(new Option("select"));
    objMedia.disabled = true;
    break;
}

}
function Setpage(objLanguage) {
var objMedia = document.getElementById("page");
objMedia.options.length = 0;
    objMedia.disabled = false;
switch (objLanguage.value) {
case "The Hindu":
    objMedia.options.add(new Option("Option 3"));
    objMedia.options.add(new Option("Option 4"));
    break;
case "The Indian Express":
    objMedia.disabled = false;
    objMedia.options.add(new Option("Option 1"));
    objMedia.options.add(new Option("Option 2"));
    break;
default:
    objMedia.options.add(new Option("select"));
    objMedia.disabled = true;
    break;
}

}

FIDDLE

第三个下拉菜单影响第一个和第二个下拉菜单

Third Dropdown Is Influenced On First And Second Dropdown Menu

html

javascript

jquery

drop-down-menu