How to dynamically generate duplicate drop down list control when select value from one drop down list

Question

How to dynamically generate duplicate drop down list control when select value from one drop down list .

Ex: Select country then generate duplicate state drop-down list below when select state drop-down, then generate duplicate city drop-down list below.

But I want to use only one drop-down list after the selected generate duplicate

Try to generate normal html using javascript and then add it to onChange/onClick event — Saif

The KNVB The KNVB · Accepted Answer · 2014-12-10T08:06:58

This is a sample code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=big5">
        <script language=javascript>
            var subCat=new Array();
            subCat[1]={2:"Computer Book",9:"Grammar Book"};
            subCat[3]={4:"Digital Watch",5:"Analogue Watch"};
            subCat[6]={7:"Android Phone",8:"IPhone"};

            function change_sub_cat(v)
            {
              var cat_id=v.options[v.selectedIndex].value;
              var subCats=subCat[cat_id];
              var subCatDropDown=document.getElementsByName("subCat_id")[0];
              clearDropDown("subCat_id");
              for (subCat_id in subCats)
              {
                option=new Option(subCats[subCat_id],subCat_id);
                subCatDropDown.options[subCatDropDown.options.length]=option;
              }
            }
            function clearDropDown(boxName)
            {
                var x=document.getElementsByName(boxName);
                for (i=0;i<x[0].options.length;i++)
                {
                    x[0].options[i]=null;
                }
                var allOptions=new Option("All",0);
                x[0].options[0]=allOptions;
            }
        </script>
    </head>
    <body style="font-family:arial">
    <h1>Product</h1>
    <form name="choose" method="post" width="100%">
    <table  cellpadding="2" border=0>
        <tr>
            <td align="right">
            Category:
            </td>
            <td align=left>
                <select name="cat_id" onchange="change_sub_cat(this)">
                    <option value=1>Book</option>
                    <option value=3>Watch</option>
                    <option value=6>Mobile phone</option>
                </select>
            </td>
            <td align="right">
            Sub-Category:
            </td>
            <td align=left>
            <select name="subCat_id" size=1>
                <option value=0>All</option>
                <option value=2>Computer Book</option>
                <option value=9>Grammar Book</option>
            </select>
            </td>
            <td>
                <input type="submit" value="Show selection">
            </td>
        </tr>
    </table>   
    </form>
    </body>   
</html>   enter code here

How to dynamically generate duplicate drop down list control when select value from one drop down list

1 Answers