javascript - 动态下拉

Question

我的站点中有两个下拉菜单。我想根据我们使用 JavaScript 通过“onChange()”fn 在另一个下拉框上选择的值来更改一个下拉列表的选项数量和选项值。例如/第一个下拉菜单/

<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 完成，请给我一个解决方案。

Answer 1

试试这个。

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

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

此处演示:http://jsfiddle.net/naveen/z48dc/