论坛 › JavaScript › cityAreaSelect.js使用说明

蒋传领 发表于 2024-7-12 09:47:35

cityAreaSelect.js使用说明

 一、简介

该JS为省市区选择插件，当前最新版本为1.0，插件中地区数据更新于2024年07月02日，插件不依赖第三方JS，可独立使用。
github地址：https://github.com/TammyViola/cityAreaSelect
 
二、CSS和JS引用

PS：样式可根据项目实际情况进行调整
<link href="./dist/css/cityAreaSelect.css" rel="stylesheet" type="text/css"/>
...三、html编写及对应JS调用

1. 省市区-select控件-3级联动

1）html代码：

   
      <selectid="provinceSelect1">
            <option value="">请选择省/直辖市</option>
      </select>
   
   
      <selectid="citySelect1">
            <option value="">请选择城市/区</option>
      </select>
   
   
      <selectid="areaSelect1">
            <option value="">请选择区/县</option>
      </select>
    2）JS代码：

const pcaSelect1 = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect1', 'citySelect1', 'areaSelect1'],
    onInit: function(provinceSelect, citySelect, areaSelect){
      //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
    },
    onSelected: function(provinceVal, cityVal, areaVal){
      //console.log(provinceVal+', '+cityVal+', '+areaVal)
    }
}); 
2. 省市-select控件-2级联动

1）html代码：

   
      <selectid="provinceSelect2">
            <option value="">请选择省/直辖市</option>
      </select>
   
   
      <selectid="citySelect2">
            <option value="">请选择城市/区</option>
      </select>
    2）JS代码：

const pcaSelect2 = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect2', 'citySelect2']
}); 
3. 省市区-自定义div控件-3级联动

1）html代码：

   
      
            <input type="text" hiddenid="provinceSelect3">
            请选择省/直辖市
      
   
   
      
            <input type="text" hiddenid="citySelect3">
            请选择城市/区
      
   
   
      
            <input type="text" hiddenid="areaSelect3">
            请选择区/县
      
    2）JS代码：

const pcaSelect3 = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect3', 'citySelect3', 'areaSelect3'],
    onSelected: function(provinceVal, cityVal, areaVal){
      //console.log(provinceVal+', '+cityVal+', '+areaVal)
    }
}); 
4. 省市区-自定义div控件-2级联动

1）html代码：

   
      
            <input type="text" hiddenid="provinceSelect4">
            请选择省/直辖市
      
   
   
      
            <input type="text" hiddenid="citySelect4">
            请选择城市/区
      
    2）JS代码：

const pcaSelect4 = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect4', 'citySelect4']
}); 
5. 省市区-自定义div控件-多级合并

1）html代码：

   
      
            
                <input type="text" hiddenid="provinceSelect5">
                请选择省市区
            
      
    2）JS代码：

const pcaSelect5 = new ProvinceCityAreaSelect({
    addrValElem: 'provinceSelect5',
    separator: '-',
    onInit: function(provinceSelect, citySelect, areaSelect){
      //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
    },
});3）效果预览：



四、参数说明

参数值参数值类型默认值说明addrValElemString / Arraynull1. Array类型：省市区控件Id，例如：['provinceSelect1', 'citySelect1', 'areaSelect1']
2. String类型：自定义div省市区多级合并时使用，参数值为隐藏域input的Id，例如： 'cityAreaInput'
separatorString' '（空格符）自定义div省市区多级合并时使用，自定义省市区地名间的间隔连接符号；
例如：separator: '-' （北京市-东城区）
provinceWordString'请选择省/直辖市'省/市占位提示语cityWordString'请选择城市/区'市/区占位提示语areaWordString'请选择区/县'区/县占位提示语mergeWordString'请选择省市区'1. 省市区合并时且web端才有效，其他时候无效；
2. 省市区合并显示控件占位提示语
onInitFunctionnullJS初始加载后回调，可返回省市区控件id值
onSelectedFunctionnull省市区选择后回调，可返回省市区当前值value
 
五、Events事件

1. onInit ：初始加载后回调

该参数为插件初始加载后回调，可返回省市区控件id值。
const pcaSelect = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'],
    onInit: function(provinceSelect, citySelect, areaSelect){
      //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
    }
}); 
2. onSelected : 省市区选择后回调

该参数为插件 省市区选择后回调，可返回省市区当前值value。
const pcaSelect = new ProvinceCityAreaSelect({
    addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'],
    onSelected: function(provinceVal, cityVal, areaVal){
      //console.log(provinceVal+', '+cityVal+', '+areaVal)
    }
}); 

来源:https://www.cnblogs.com/TammyBlog/p/18296123
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

查看完整版本: cityAreaSelect.js使用说明