<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;
}
}
}
})
}