因为公司项目，做了一个下拉选框内容动态过滤，请大家看看。
 |
ZHJason
2011-06-06
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>insertRow</title>
<script type="text/javascript">
window.onload=function(){
var initContent=document.getElementById("initContainer").childNodes[0].childNodes[0].innerHTML;
var header="<table id='formTable'>";
var footer="</table>";
var content=document.getElementById("container");
content.innerHTML=header+initContent+footer;
var formTable=document.getElementById("formTable");
var selectedValueArray=getSelectedValueArray(formTable);
selectObjectsFilter(formTable,selectedValueArray);
}
//获取参数Table上已经选择的下拉选单的值，并保存到数组中。
function getSelectedValueArray(t){
var selectedValueArray=new Array();
var trLen=t.childNodes[0].childNodes.length;
for(var i=0;i<trLen;i++){
//获取每一行的select选择框对象
var selectObject=t.childNodes[0].childNodes[i].childNodes[1].childNodes[0];
var optionObjects=selectObject.options;
for(var j=0;j<optionObjects.length;j++){
if(optionObjects[j].selected==true&&optionObjects[j].value!='')
selectedValueArray.push(optionObjects[j].value);
}
}
return selectedValueArray;
}
//SVArray:selectedValueArray
function selectObjectsFilter(table,SVArray){
//init 假设每行不存在重复的选择
var trLen=table.childNodes[0].childNodes.length;
for(var i=0;i<trLen;i++){
//获取每一个select下拉选单对象
var selectObject=table.childNodes[0].childNodes[i].childNodes[1].childNodes[0];
//获取每一个下拉选单对象的option对象
var optionObjects=selectObject.options;
for(var j=0;j<optionObjects.length;j++){
//循环得到option对象所有的值
var optionValue=optionObjects[j].value;
for(var v=0;v<SVArray.length;v++){
//如果option对象的值等于数组中的值，且不是选中状态，则删除。
if(optionValue==SVArray[v]&&optionObjects[j].selected==false){
selectObject.remove(j);
j--;
//删除掉一个option值，optionObjects.length会减少1,因此需要减1平衡。
}
}
}
}
}
function addRow(sourceDIV,targetDIV){
var source=document.getElementById(sourceDIV).childNodes[0].childNodes[0].innerHTML;
var target=document.getElementById(targetDIV);
var header="<table id='formTable'>";
var footer="</table>";
//如果目的div中没有内容，则直接添加。
if(target.innerHTML==''){
target.innerHTML=header+source+footer;
}else{
//将以前的内容暂存到tempContent中。
var tempContent=target.childNodes[0].childNodes[0].innerHTML;
target.innerHTML=header+tempContent+source+footer;
}
//对新表格进行操作，查找已经选择的下拉选单的值。
var selectedValueArray=getSelectedValueArray(document.getElementById('formTable'));
selectObjectsFilter(document.getElementById('formTable'),selectedValueArray);
}
//恢复初始状态下拉选单的值
function restoreSelectOptions(table){
//获得需要操作的table
var selectedTable=document.getElementById(table);
//需要操作table的每一行内容
var trs=selectedTable.childNodes[0].childNodes;
//需要增加的内容
var oriSelectContent=document.getElementById('oriContainer').childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML;
for(var i=0;i<trs.length;i++){
var optionSelectedValue=getSelectedValueByTr(trs[i]);
trs[i].childNodes[1].innerHTML=oriSelectContent;
var targetOptions=trs[i].childNodes[1].childNodes[0].options;
for(var j=0;j<targetOptions.length;j++){
if(targetOptions[j].value==optionSelectedValue)
targetOptions[j].selected=true;
}
}
selectObjectsFilter(selectedTable,getSelectedValueArray(selectedTable));
}
//通过tr得到该行select对象说选中的值
function getSelectedValueByTr(tr){
var selectObject=tr.childNodes[1].childNodes[0];
var optionObjects=selectObject.options;
for(var j=0;j<optionObjects.length;j++){
if(optionObjects[j].selected==true)
return optionObjects[j].value;
}
}
</script>
</head>
<body>
<input type="button" value="addRow" onClick="addRow('oriContainer','container')" />
<div id="container"></div>
<div id="initContainer" style="display: none">
</div>
<div id="oriContainer" style="display: none">
<table border="1">
<tr>
<td></td>
<td>
<select onchange="restoreSelectOptions('formTable')">
<option value="">--choose--</option>
<option value="001;;;qqqAAA">A</option>
<option value="002;;;qqqBBB">B</option>
<option value="003;;;qqqCCC">C</option>
<option value="004;;;qqqDDD">D</option>
<option value="005;;;qqqEEE">E</option>
<option value="006;;;qqqFFF">F</option>
<option value="007;;;qqqGGG">G</option>
<option value="008;;;qqqHHH">H</option>
</select>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
这个页面有个按钮，点击按钮能够动态增加下拉选单，下拉选单的内容本来是固定的，现在是动态过滤了。其他下拉选单选中的内容，会影响到之前下拉选单的value值。 |
 |
zhangjie.0211
2011-07-08
var initContent=document.getElementById("initContainer").childNodes[0].childNodes[0].innerHTML;
神奇! |
|
b_l_east
2011-07-15
讨厌长篇代码，还是口述吧
|
 |
m2maomao
2012-04-20
var oriSelectContent=document.getElementById('oriContainer').childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML;
像这种取得子节点js没有其他更简洁的方法吗？ |
|
ZHJason
2012-05-20
m2maomao 写道 var oriSelectContent=document.getElementById('oriContainer').childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML;
像这种取得子节点js没有其他更简洁的方法吗？ 你好，这个是我目前想到的方法，应该算是最直接的吧，因为我做的项目不是很多，所以如果有更好的方法，请指教一下，谢谢。 |
|
m2maomao
2012-05-24
ZHJason 写道 m2maomao 写道 var oriSelectContent=document.getElementById('oriContainer').childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML;
像这种取得子节点js没有其他更简洁的方法吗？ 你好，这个是我目前想到的方法，应该算是最直接的吧，因为我做的项目不是很多，所以如果有更好的方法，请指教一下，谢谢。 您谦虚了，我js很菜，只会用jquery.还得多向您学习才是。 |
