福建地区下拉选择框实现-优快云博客

本文链接：https://blog.youkuaiyun.com/lqscoke/article/details/1480279

本文介绍了一个基于HTML和JavaScript实现的福建省地区下拉选择框案例，详细展示了如何通过预定义的地区数据来填充省份和城市选项。该案例适用于需要用户选择特定地区的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<select name=Province size=1 class="biaodan" id=Province onChange=FillCitys();>
              <option value="0" selected>请选择所在地区</option>

              <option value=8>龙岩</option>

              <option value=6>三明</option>

              <option value=4>泉州</option>

              <option value=2>厦门</option>

              <option value=3>漳州</option>

              <option value=5>莆田</option>

              <option value=7>南平</option>

              <option value=9>宁德</option>


              <option value=1>福州</option>

            </select>
<select name=City  size=1 class="biaodan" id=City>
                <option value="0" selected>请选择所在城市</option>



              </select>
</body>
</html>

<SCRIPT language="JavaScript" type="text/JavaScript">
    var Citys = [];

            Citys['8'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('连城', '75')

                    , new Option('新罗', '69')

                    , new Option('上杭', '72')

                    , new Option('武平', '73')

                    , new Option('永定', '71')

                    , new Option('漳平', '70')

                    , new Option('长汀', '74')

            );

            Citys['6'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('梅列', '48')

                    , new Option('明溪', '54')

                    , new Option('清流', '50')

                    , new Option('三元', '47')

                    , new Option('沙县', '56')

                    , new Option('泰宁', '53')

                    , new Option('永安', '49')

                    , new Option('尤溪', '57')

                    , new Option('宁化', '51')

                    , new Option('大田', '58')

                    , new Option('建宁', '52')

                    , new Option('将乐', '55')

            );

            Citys['4'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('鲤城', '31')

                    , new Option('洛江', '33')

                    , new Option('泉港', '34')

                    , new Option('石狮', '37')

                    , new Option('永春', '41')

                    , new Option('南安', '36')

                    , new Option('安溪', '39')

                    , new Option('德化', '40')

                    , new Option('丰泽', '32')

                    , new Option('惠安', '38')

                    , new Option('晋江', '35')

            );

            Citys['2'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('思明', '14')

                    , new Option('翔安', '19')

                    , new Option('同安', '18')

                    , new Option('海沧', '17')

                    , new Option('湖里', '15')

                    , new Option('集美', '16')

            );

            Citys['3'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('龙文', '21')

                    , new Option('龙海', '22')

                    , new Option('云霄', '27')

                    , new Option('漳浦', '23')

                    , new Option('诏安', '30')

                    , new Option('芗城', '20')

                    , new Option('南靖', '28')

                    , new Option('平和', '29')

                    , new Option('长泰', '26')

                    , new Option('东山', '25')

                    , new Option('华安', '24')

            );

            Citys['5'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('荔城', '44')

                    , new Option('秀屿', '45')

                    , new Option('仙游', '46')

                    , new Option('城厢', '42')

                    , new Option('涵江', '43')

            );

            Citys['7'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('松溪', '67')

                    , new Option('邵武', '60')

                    , new Option('顺昌', '64')

                    , new Option('武夷山', '61')

                    , new Option('延平', '59')

                    , new Option('政和', '68')

                    , new Option('浦城', '65')

                    , new Option('光泽', '66')

                    , new Option('建瓯', '62')

                    , new Option('建阳', '63')

            );

            Citys['9'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('柘荣', '82')

                    , new Option('寿宁', '80')

                    , new Option('霞浦', '79')

                    , new Option('屏南', '84')

                    , new Option('周宁', '81')

                    , new Option('福安', '77')

                    , new Option('福鼎', '78')

                    , new Option('古田', '83')

                    , new Option('蕉城', '76')

            );



            Citys['1'] = new Array(new Option('请选择所在城市', '0')

                    , new Option('马尾', '5')

                    , new Option('闽清', '11')

                    , new Option('闽侯', '8')

                    , new Option('连江', '12')

                    , new Option('罗源', '13')

                    , new Option('台江', '2')

                    , new Option('永泰', '10')

                    , new Option('平潭', '9')

                    , new Option('仓山', '3')

                    , new Option('长乐', '7')

                    , new Option('福清', '6')

                    , new Option('鼓楼', '1')

                    , new Option('晋安', '4')

            );

                Citys['0'] = new Array(new Option('请选择所在城市', '0'));



    function FillCitys(){
        with (document.all) {
            if(Province.value) {
                City.options.length = 0;
                for(var i = 0;i < Citys[Province.value].length;i ++){
                    City.add(Citys[Province.value][i]);
                }
            }
        }
    }

</SCRIPT>

所在地选择