<!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>Test select</title>
<style type="text/css">
div {margin:2px;}
body>div {margin:8px; padding:4px; border:solid 2px #e0e0e0;}
</style>
<script type="text/javascript">
var itemMap = {
"a1":{
"" : {value:"",text:"-- 请选择 --"},
"b1" : {value:"bbab",text:"000b"},
"c2" : {value:"cbec",text:"000c"},
"f5" : {value:"fgff",text:"000f"},
"i8" : {value:"ifdb",text:"000i"}
},
"ba":{
"" : {value:"",text:"-- 请选择 --"},
"f3" : {value:"ddcc",text:"000d"},
"e4" : {value:"eeff",text:"000e"}
},
"c3":{
"" : {value:"",text:"-- 请选择 --"},
"d7" : {value:"ffgg",text:"000h"}
},
"bc":{
"" : {value:"",text:"-- 请选择 --"},
"g6" : {value:"ggfg",text:"000g"},
"f3" : {value:"ddcc",text:"000d"},
"c2" : {value:"cbec",text:"000c"}
}
};
function clearChildNodes(elem){
while(elem && elem.hasChildNodes()){
elem.removeChild(elem.firstChild);
}
}
function doSomeThing(event){
var evt = event || window.event;
var srcElem = evt.target || evt.srcElement;
var srcId = srcElem.options[srcElem.selectedIndex].id;
var listElem = document.getElementById("blist");
var optElem;
var textElem;
var listItems = itemMap[srcId];
var item;
if( srcElem && listElem && itemMap[srcId]){
clearChildNodes(listElem);
for(item in listItems){
optElem = document.createElement("option");
textElem = document.createTextNode(listItems[item].text);
optElem.appendChild(textElem);
optElem.setAttribute("value",listItems[item].value);
optElem.setAttribute("id",item);
listElem.appendChild(optElem);
}
}
}
</script>
</head>
<body>
<div>
<div>这是你要的结果</div>
<div>但是一定要这样子吗? option 加上 ID 感觉怪怪的……</div>
<select name="noa" id="alist" onchange="doSomeThing(event)">
<option value="" selected>-请选择-</option>
<option value="aaba" id="a1">000a</option>
<option value="acba" id="ba">00ba</option>
<option value="safa" id="c3">0cba</option>
<option value="ahbc" id="bc">dcba</option>
</select>
<select name="nob" id="blist" onchange="">
<option value="" selected>-请选择-</option>
</select>
</div>
<div>
<div>这样行不行?</div>
<select onchange="doOtherThing(event)">
<option value="" selected>--请选择--</option>
<optgroup label="000a">
<option value="aaba,bbab"> 000b </option>
<option value="aaba,cbec"> 000c </option>
<option value="aaba,fgff"> 000f </option>
<option value="aaba,ifdb"> 000i </option>
</optgroup>
<optgroup label="00ba">
<option value="acba,ddcc"> 000d </option>
<option value="acba,eeff"> 000e </option>
</optgroup>
<optgroup label="0cba">
<option value="safa,ffgg"> 000h </option>
</optgroup>
<optgroup label="dcba">
<option value="ahbc,ggfg"> 000g </option>
<option value="ahbc,ddcc"> 000d </option>
<option value="ahbc,cbec"> 000c </option>
</optgroup>
</div>
</body>
</html>