logo标签列表

动态下拉菜单

javascript
3

我的网站上有两个下拉框。我想通过使用JavaScript中的'onChange()'函数，根据我们在另一个下拉框中选择的值来更改一个下拉框的选项数和选项的值。例如：第一个下拉框

<select name="language" id="language">
    <option>select</option>
    <option >English</option>
    <option>Tamil</option>
    <option>Telugu</option>
    <option >Kannada</option>
    <option>Malayalam</option>
    <option >Urdu</option>
    <option>Punjabi</option>
</select>

/第二个下拉框，其选项数量和值将根据上面下拉框的更改而更改/ /的值/

<select name="media">
    <option>The Indian Express</option>
    <option >The Hindu</option>
    <option >CNN IBN</option>
    <option>NDTV</option>
</select>

我已经苦苦思索了很久，即使可以通过php实现，请提供一种解决方案。

2个回答
3
尝试一下这个。
HTML
<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>

JavaScript（简称JS）
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;
    }
}

Demo here: http://jsfiddle.net/naveen/z48dc/

它能够工作，但如果我尝试使用另一个JavaScript函数（jQuery）来样式化下拉菜单，则无法正常工作。还要感谢上面的解决方案。 - praba230890
请详细说明，我没有明白你的意思。 - naveen
这里我正在尝试使用onchange同时为这些下拉菜单添加一些时尚的外观。当我在没有任何样式的情况下使用下拉菜单时，您的代码运行良好，但这并不是问题，作为一个初学者，我无法弄清楚如何通过onchange方法使第二个下拉菜单也起作用。我尝试过但失败了。我希望两个下拉菜单都能通过onChange方法工作。 - praba230890
我还有一个疑问。在创建第二个下拉菜单时，是否可以添加选项的值？ - praba230890
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接