Liste déroulante dynamique

Question

J'ai deux listes déroulantes sur mon site. Je veux changer le nombre d'options et les valeurs des options d'une liste déroulante en fonction de la valeur que nous choisissons sur l'autre liste déroulante par la fn 'onChange()' en utilisant JavaScript. Par exemple / premier volet /

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

/ Deuxième liste déroulante dont le nombre d'options et de valeurs doit être modifié en fonction de la modification de la valeur. / / de la liste déroulante ci-dessus /

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

Je me suis battu avec cela pendant longtemps et même si cela peut être fait par php s'il vous plaît fournissez-moi une solution.

Answer 1

Essayez ça.

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

Démonstration ici : http://jsfiddle.net/naveen/z48dc/

Answer 2

Si vous devez le faire en simple javascript, vous pouvez le faire, ce qui aura pour résultat une approche un peu sale.

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

Je suggère de le faire en utilisant JQUERY et AJAX. Envoyez une requête AJAX pour obtenir les données de la deuxième liste déroulante. Regardez cet exemple

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

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