Question

我的网站上有两个下拉列表。我想通过'onChange（）'fn使用JavaScript更改选项数量和一个下拉选项的值，具体取决于我们在另一个dropbox上选择的值。例如 / 第一次下拉 /

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

/ 第二个下拉列表中没有选项和＆amp;值将根据更改上述下拉列表中的值 / / 进行更改 /

<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/

Answer 2

如果你必须这样做只是简单的javascript而不是你可以做到这一点。这将导致一些肮脏的方法。

http://www.felgall.com/jstip22.htm

我建议使用JQUERY和AJAX来做到这一点。发送AJAX请求以获取第二个下拉数据。检查此示例

http://www.99points.info/2010/06/ajax-tutorial-dynamic-loading-of-combobox-using-jquery-and-ajax-in-php/

http://demos.99points.info/dynamic_dropdown/

动态下拉列表

2 个答案: