<select name="fatherselect" id="fatherselect" class="sps-ui-select fathercategory">
<option data-categoryid="" name="fatherfirst" value="">一级分类</option>
<option value="" data-categoryid="1">五险一金</option>
<option value="" data-categoryid="2">企业服务</option>
<option value="" data-categoryid="3">员工服务</option>
</select>
<select name="childselect" id="childselect" class="sps-ui-select">
<span style="white-space:pre"> </span><option pid="" data-categoryid="" name="childfirst" value="">二级分类</option>
<span style="white-space:pre"> </span><option value="" class="pid pid1" data-categoryid="5" style="display: none;">社会保险服务</option>
<span style="white-space:pre"> </span><option value="" class="pid pid1" data-categoryid="6" style="display: none;">公积金服务</option>
<span style="white-space:pre"> </span><option value="" class="pid pid2" data-categoryid="7" style="display: none;">社保账户服务</option>
<span style="white-space:pre"> </span><option value="" class="pid pid2" data-categoryid="8" style="display: none;">公积金账户服务</option>
<span style="white-space:pre"> </span><option value="" class="pid pid3" data-categoryid="9" style="">社保日常服务</option>
<span style="white-space:pre"> </span><option value="" class="pid pid3" data-categoryid="10" style="">公积金日常服务</option>
</select>
//将option序列到数组中var childselectAry =
$(
"#childselect option.pid").
map(
function(){
return $(
this).
context.
outerHTML}).
get()
;//父级变化触发事件
$(
"#fatherselect").
on(
"change",function () {
$father =
$(
"#fatherselect").
find(
"option:selected")
;
if(
$father.
attr(
"data-categoryId") !=
""){//标准浏览器处理方法
$(
"#childselect option[name='childfirst']").
show()
;
$(
"#childselect").
removeAttr(
"disabled")
;
var pid =
$father.
attr(
"data-categoryId")
;
$(
"#childselect option.pid").
hide()
;
$(
"#childselect option.pid" + pid).
show()
;
//ie8浏览器处理方法
if(
isIE){ $(
"#childselect option.pid").
remove()
for (
key in childselectAry){
if(childselectAry[
key].
indexOf(
"pid"+pid)> -
1){
$(
"#childselect").
append(childselectAry[
key])
}
} }
else{//父级选中默认选项操作
$(
"#childselect option.pid").
hide()
;
$(
"#childselect option[name='childfirst']").
prop(
"selected", true)
;
$(
"#childselect").
attr(
"disabled","true")
;
}
})
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
转载请注明原文地址: https://ju.6miu.com/read-1308256.html