实现省市区三级联动js插件

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">联动选择器插件</span>

借鉴地址:http://www.jb51.net/article/70912.htm 


知识点: HTML5新属性“ data-*”

取值:

<div id="content" data-age="18">html5 data-*自定义属性 age</div>

多了一个”data-*” 属性, 如何获取呢?

//js

var content= document.getElementById('content');

alert(content.dataset.age)

//jquery

$('#content').data('age');//读

复杂取值使用驼峰命名:

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

//js

var content= document.getElementById('content');

alert(content.dataset.userList)

//jquery

$('#content').data('userList');//读


赋值:

通过js方式给data-*设置值

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

//js

var content= document.getElementById('content');

content.dataset.name='我叫tom'

alert(content.dataset.name)

//jquery

$('#content').data('name','我叫tom');//写


getAttribute/setAttribute方法的使用

var content= document.getElementById('content');        

content.dataset.birthDate = '19990619';        

content.setAttribute('age', 25);       

console.log(content.getAttribute('data-age')); //25       console.log(content.getAttribute('data-birth-date')); //19990519     

问题:

新建信息时成功,修改信息时后台取数据不能正常显示。


解决方法:

function changeask(id){
    document.getElementById("gm-bg").style.display="block";
    document.getElementById("gm-change").style.display="block";
    _changeid=id;

    $.ajax({
        type:'GET',
        url:'/member/info/getOneAddressById',
        dataType:'json',
        data:{
            'id':_changeid,
        },
        success:function(data){
            console.log(data);
            $('#nameinputch').val(data.name);
            $('#phoneinputch').val(data.phone);
            $('#addressinputch').val(data.address);

            var prov = document.getElementById('provC');   //获取省select元素
            var city = document.getElementById('cityC');   //获取市select元素
            var area = document.getElementById('areaC');   //获取区select元素
            for(var i=0; i<prov.options.length;i++){       //遍历省下的option,如果与后台取得的数据相等,则将相应的option属性selected设置为真
                if(prov.options[i].value==data.province){
                    prov.options[i].selected = true;
                    break;
                }
            }

            _selectC._cityFunc();  //重新渲染选中省对应的市列表, _cityFunc()属于插件原型里方法,如没有此步骤,市和区的select将不会联动取得相应列表


            for(var j=0; j<city.options.length;j++){
                if(city.options[j].value==data.city){
                    city.options[j].selected = true;
                    break;
                }
            }

            _selectC._areaFunc();  //重新渲染选中市对应的区列表

            for(var i=0; i<area.options.length;i++){
                if(area.options[i].value==data.area){
                    area.options[i].selected = true;
                    break;
                }
            }


        }
    })

}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值