省市选择_js封装

最新推荐文章于 2024-09-14 16:26:17 发布

comzheng

最新推荐文章于 2024-09-14 16:26:17 发布

阅读量3.1k

点赞数

文章标签： stylesheet input border null list div

本文链接：https://blog.csdn.net/comzheng/article/details/4379408

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/jscript" src="JScript.js"></script>
    <script type="text/jscript" src="JScript2.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>
              <div class="name_list font_space fleft"> 所在省：</div>
              <div class="input_list font_space fleft">
                  <select onchange="change_area('province','city');
                    try{
                        if(this.value!='0'){
                            document.getElementById('city').options[document.getElementById('city').options.length] = new Option('-地区/城市-','');
                            document.getElementById('city').options[document.getElementById('city').options.length-1].selected=true;
                        }
                    }
                    catch(e){}"
                    id="province" name="province" style="width: 235px;">
                    <script type="text/javascript">
                        
                    </script>
                           <option value="0">-省/直辖市-</option>
                           <option value="北京市">北京</option>
                           <option value="上海市">上海</option>
                           <option value="天津市">天津</option>
                           <option value="广东省">广东</option>
                           <option value="浙江省">浙江</option>
                           <option value="江苏省">江苏</option>
                           <option value="福建省">福建</option>
                           <option value="湖南省">湖南</option>
                           <option value="湖北省">湖北</option>
                           <option value="重庆市">重庆</option>
                           <option value="辽宁省">辽宁</option>
                           <option value="吉林省">吉林</option>
                           <option value="黑龙江省">黑龙江</option>
                           <option value="河北省">河北</option>
                           <option value="河南省">河南</option>
                           <option value="山东省">山东</option>
                           <option value="陕西省">陕西</option>
                           <option value="甘肃省">甘肃</option>
                           <option value="青海省">青海</option>
                           <option value="***维吾尔自治区">***</option>
                           <option value="山西省">山西</option>
                           <option value="四川省">四川</option>
                           <option value="贵州省">贵州</option>
                           <option value="安徽省">安徽</option>
                           <option value="江西省">江西</option>
                           <option value="云南省">云南</option>
                           <option value="内蒙古自治区">内蒙古</option>
                           <option value="广西壮族自治区">广西</option>
                           <option value="西藏自治区">西藏</option>
                           <option value="宁夏回族自治区">宁夏</option>
                           <option value="海南省">海南</option>
                           <option value="香港特别行政区">香港</option>
                           <option value="澳门特别行政区">澳门</option>
                           <option value="台湾省">台湾</option>
                  </select>
              </div>
            </li>
            <li>
              <div class="name_list font_space fleft"> 所在城市：</div>
              <div class="input_list font_space fleft">
                  <select id="city" name="city" style="width: 235px;">
                        <script type="text/javascript">
                            change_area("province","city");
                            firstSelect("city","");
                        </script>
                        <option value="0">-地区/城市-</option>
                  </select>
              </div>
            </li>
        </ul>
    </div>
</body>
</html>

//初始化option list
function fillSelect(nodeString,array) {
    var node = document.getElementById(nodeString);
    var nodelen = node.length;
    for(var i=nodelen,j=0;i<array.length+nodelen;i++,j++){
        node.options[i] = new Option(array[j][1],array[j][0]);
    }
}
//初始化默认
function firstSelect(id,value) {
    if(value == null || value == '') return;
    var sTmp = document.getElementById(id);
    for (var i=0; i < sTmp.length; i++){
        if(sTmp.options[i].value == value) {
            sTmp.options[i].selected = true;
            return;
        }
    }
}

function change_area(country,city){
    var cg=country.options[country.selectedIndex].value;
    var select2=document.getElementById(city);
    var j=0;
    for(var i=0;i<coutryAndCity.length;i++){
        if(coutryAndCity[i].country==cg){
            select2.options[j]=new Option(coutryAndCity[i].cityValue,coutryAndCity[i].cityText);
            j++;
        }
    }
    if(cc>j) {
        for(var ii=cc;ii>=j;ii--){
            select2.options[ii] = null;
        }
    }
    cc=j;
}
var provinceArray = [
    ["0","-省/直辖市-"],
    ["北京市","北京"],
    ["上海市","上海"],
    ["天津市","天津"],
    ["广东省","广东"],
    ["浙江省","浙江"],
    ["江苏省","江苏"],
    ["福建省","福建"],
    ["湖南省","湖南"],
    ["湖北省","湖北"],
    ["重庆市","重庆"],
    ["辽宁省","辽宁"],
    ["吉林省","吉林"],
    ["黑龙江省","黑龙江"],
    ["河北省","河北"],
    ["河南省","河南"],
    ["山东省","山东"],
    ["陕西省","陕西"],
    ["甘肃省","甘肃"],
    ["青海省","青海"],
    ["***维吾尔自治区","***"],
    ["山西省","山西"],
    ["四川省","四川"],
    ["贵州省","贵州"],
    ["安徽省","安徽"],
    ["江西省","江西"],
    ["云南省","云南"],
    ["内蒙古自治区","内蒙古"],
    ["广西壮族自治区","广西"],
    ["西藏自治区","西藏"],
    ["宁夏回族自治区","宁夏"],
    ["海南省","海南"],
    ["香港特别行政区","香港"],
    ["澳门特别行政区","澳门"],
    ["台湾省","台湾"]
];

body,div,ul,li,form,p{padding:0;margin:0;list-style-type:none;}
body{background-color:#FFF;margin-top:7px;}
body,div{text-align:center;font-size:12px;font-family:宋体;margin-left:auto;margin-right:auto;line-height:19px;}
ul,li{clear:both;}
img{border:0;}
input,select{border:#A3BFA8 1px solid;background-color:#FFF;}

.name_list{width:180px;text-align:right; margin-bottom:12px;padding-top:2px; clear:both;}
.font_space{letter-spacing:1px;}
.fleft{float:left;}
.atten{font-size:12px;font-weight:normal;color:#F00;}
.input_list{width:250px;text-align:left;}