Question

请注意，我从本网站上的另一个问题获得了此脚本，我想将其用于我的项目。我想要完成的是如果选择英语和印度快速，那么它将显示第三个下拉列表。如果选择了印度教，则第三个下拉列表中将出现一组不同的页面。这就是我所拥有的：

<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

第三次下拉受到第一次和第二次下拉菜单的影响

1 个答案: