动态下拉列表 [英] Dynamic dropdown

查看:130
本文介绍了动态下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have two dropdowns in my site. I want to change the number of options and the values of options of one dropdown depending on the value we choosing on the other dropbox by 'onChange()' fn using JavaScript. For example /first dropdown/

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

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

/Second dropdown whose no of options & values are to be changed based on changing the value/ /of above dropdown/

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

我很长时间都在苦苦挣扎,即使这可以通过php完成,请提供给我一个解。

I was struggling with it for a long and even if this can be done through php please provide me a solution.

推荐答案

试试这个。

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

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/

这篇关于动态下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆