Dynamic dropdown

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>
开发者_JS百科

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

Try this.

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

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

If you have to do this just plain javascript than you can do this.Which will result in little dirty approach .

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

I would suggest to do this using JQUERY and AJAX . Send a AJAX request to get the second dropdown data . Check this sample

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

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