如何使用javascript在html中进行三级选择_Javascript_Html

如何使用javascript在html中进行三级选择

javascript html

如何使用javascript在html中进行三级选择,javascript,html,Javascript,Html,这里用select标记给出了两个级别的选择，我想通过添加一个select标记来增加一个级别 <script type="text/javascript"> var countries = [ ]; countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheo

这里用select标记给出了两个级别的选择，我想通过添加一个select标记来增加一个级别

        <script type="text/javascript">

            var countries = [ ];
            countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
            countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];

            var Tehsil = [ ];
            Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];

            function switchCountry(selCountry)
            {
                var citySel = selCountry.form.City;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = countries[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }

            function switchCountry1(selCountry)
            {
                var citySel = selCountry.form.Tehsil;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = Tehsil[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }


        </script>

        </head>
        <body>  
        <br>
        <form>
            <center>    

                <h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
                <option value = "">Choose state</option>


                <option value="mdp">Madhya Pradesh</option>

                <option value="utp">Uttar Pradesh</option>      

                </select></h3>

            <h3>Select District place : <select name="City" onchange="switchCountry1(this);">
                        <option>Choose City</option>
                        </select>
            <h3>Select Tehsil place : <select name="Tehsil">
                        <option>Choose Tehsil</option>
                        </select>

            </h3><br>

            </center>
        </form><br><br><br>
        </body>
        </html>

如果我从第一个选择标签中选择了中央邦，然后从第二个选择标签中选择了Rewa，则选项列表应进入第三个选择标签，参考Rewa，例如中央邦出现的Rewa

        <script type="text/javascript">

            var countries = [ ];
            countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
            countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];

            var Tehsil = [ ];
            Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];

            function switchCountry(selCountry)
            {
                var citySel = selCountry.form.City;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = countries[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }

            function switchCountry1(selCountry)
            {
                var citySel = selCountry.form.Tehsil;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = Tehsil[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }


        </script>

        </head>
        <body>  
        <br>
        <form>
            <center>    

                <h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
                <option value = "">Choose state</option>


                <option value="mdp">Madhya Pradesh</option>

                <option value="utp">Uttar Pradesh</option>      

                </select></h3>

            <h3>Select District place : <select name="City" onchange="switchCountry1(this);">
                        <option>Choose City</option>
                        </select>
            <h3>Select Tehsil place : <select name="Tehsil">
                        <option>Choose Tehsil</option>
                        </select>

            </h3><br>

            </center>
        </form><br><br><br>
        </body>
        </html>

塔希尔[雷瓦]= {胡祖尔、哈努马纳、特恩塔尔、曼加万、爪哇、锡尔穆尔、， Mauganj、Naigarhi、Semaria、Gurh、Raipur-Karchuliyan}

        <script type="text/javascript">

            var countries = [ ];
            countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
            countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];

            var Tehsil = [ ];
            Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];

            function switchCountry(selCountry)
            {
                var citySel = selCountry.form.City;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = countries[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }

            function switchCountry1(selCountry)
            {
                var citySel = selCountry.form.Tehsil;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = Tehsil[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }


        </script>

        </head>
        <body>  
        <br>
        <form>
            <center>    

                <h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
                <option value = "">Choose state</option>


                <option value="mdp">Madhya Pradesh</option>

                <option value="utp">Uttar Pradesh</option>      

                </select></h3>

            <h3>Select District place : <select name="City" onchange="switchCountry1(this);">
                        <option>Choose City</option>
                        </select>
            <h3>Select Tehsil place : <select name="Tehsil">
                        <option>Choose Tehsil</option>
                        </select>

            </h3><br>

            </center>
        </form><br><br><br>
        </body>
        </html>

如何进行第三级选择？

我对我的问题提出了如下解决方案：

        <script type="text/javascript">

            var countries = [ ];
            countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
            countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];

            var Tehsil = [ ];
            Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];

            function switchCountry(selCountry)
            {
                var citySel = selCountry.form.City;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = countries[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }

            function switchCountry1(selCountry)
            {
                var citySel = selCountry.form.Tehsil;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = Tehsil[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }


        </script>

        </head>
        <body>  
        <br>
        <form>
            <center>    

                <h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
                <option value = "">Choose state</option>


                <option value="mdp">Madhya Pradesh</option>

                <option value="utp">Uttar Pradesh</option>      

                </select></h3>

            <h3>Select District place : <select name="City" onchange="switchCountry1(this);">
                        <option>Choose City</option>
                        </select>
            <h3>Select Tehsil place : <select name="Tehsil">
                        <option>Choose Tehsil</option>
                        </select>

            </h3><br>

            </center>
        </form><br><br><br>
        </body>
        </html>

        <script type="text/javascript">

            var countries = [ ];
            countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
            countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];

            var Tehsil = [ ];
            Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];

            function switchCountry(selCountry)
            {
                var citySel = selCountry.form.City;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = countries[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }

            function switchCountry1(selCountry)
            {
                var citySel = selCountry.form.Tehsil;
                for ( var s = citySel.options.length-1; s > 0; --s )  
                {
                    citySel.options[s] = null;
                }

                var chosen = selCountry.options[selCountry.selectedIndex].text;
                var cList = Tehsil[chosen];
                if ( cList != null )
                {
                    for ( var i = 0; i < cList.length; ++i )   
                    {
                        citySel.options[i+1] = new Option(cList[i],cList[i]);
                    }
                }
            }


        </script>

        </head>
        <body>  
        <br>
        <form>
            <center>    

                <h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
                <option value = "">Choose state</option>


                <option value="mdp">Madhya Pradesh</option>

                <option value="utp">Uttar Pradesh</option>      

                </select></h3>

            <h3>Select District place : <select name="City" onchange="switchCountry1(this);">
                        <option>Choose City</option>
                        </select>
            <h3>Select Tehsil place : <select name="Tehsil">
                        <option>Choose Tehsil</option>
                        </select>

            </h3><br>

            </center>
        </form><br><br><br>
        </body>
        </html>

欢迎来到堆栈溢出！请带上，环顾四周，通读一遍，特别是如何进行第三级选择？通过观察第二个层次是如何完成的，并将该概念扩展到第三个层次。试一试，如果你遇到了一个特定的问题，发布你的代码和你遇到的问题的描述。旁注：国家是一个数组，但它被当作一个非数组对象使用。它应该通过{}而不是[]创建。在这里，有很多类似的问题和答案，但人们只是跳到这里并发布问题，而没有任何努力去寻找它。