select innerHTML在IE和FireFox下处理

在前一段时间,做ajax的时候,碰到了这样的问题:
<form name=form1 action=’#’ method=post>
<select name=typelist id=typelist>
<option value=0>=请选择=</option>
</select>
</form>

下面是一个jscript函数

<script language=javascript type=’text/javascript’>
function getTypeById(){
  var obj = document.getElementById(‘typelist’); 
  var result = “”;
  for(var i = 1; i < 6; i++ ){
  result += “<option value=”+i+”>”+i+”</option>” ;
  }
  obj.innerHTML = result; 
}
</script>

出现的结果<select></select>中的内容在IE下运行为空白,而在FireFOx中运行正确。

针对这样情况的解决办法是换另一种方法做

function getTypeById(id){ 
  var s=document.getElementById(id); 
  for(var i = 1; i < 6; i++ ){
  s.options[s.options.length] = new Option(i,i);
  }

}

//删除所有选中的项
<PUBLIC:METHOD NAME=”deleted” />
//选中所有项
<PUBLIC:METHOD NAME=”selectAll” />
//取消选中的项
<PUBLIC:METHOD NAME=”selectNone” />
<PUBLIC:ATTACH EVENT=” ONEVENT=”doClick()” />
<PUBLIC:ATTACH EVENT=”ondblclick” ONEVENT=”doDblClick()” />
<script language=”JScript”>
//从列表框中删除所有选中的项。如果obj为null,则列表框为自身。
function deleted(obj) {
 if (obj == null) obj = element;
 if (obj.tagName != “SELECT”) return;
 for (var i=obj.options.length-1;i>=0;i–) {
  if (obj.options[i].selected) {
  obj.options.remove(i);
  }
 }
}

//选中给定的列表框中所有的项。如果obj为null,则列表框为自身。
function selectAll(obj) {
 if (obj == null) obj = element;
 if (obj.tagName != “SELECT”) return;
 var length = obj.options.length;
 for (var i=0;i<length;i++) {
  obj.options[i].selected = true;
 }
}

//取消给定的列表框中所有选中的项。如果obj为null,则列表框为自身。
function selectNone(obj) {
 if (obj == null) obj = element;
 if (obj.tagName != “SELECT”) return;
 var length = obj.options.length;
 for (var i=0;i<length;i++) {
  obj.options[i].selected = false;
 }
}

//检查obj列表框中是否已经存在选项opt
function optionExists(obj,opt) {
 var length = obj.options.length;
 for (var i=0;i<length;i++) {
  if (obj.options[i].text == opt.text && obj.options[i].value == opt.value)
//如果一个选项的值和文本与给定的选项相同,则表明存在。
  return true;
 }
 return false;
//如果不存在,则返回false
}
//将列表框obj1中选中的项添加到obj2列表框中,check=true表示不向obj2中的添加重复项
function add(obj1,obj2,check) {
 for (var i=0;i<obj1.options.length;i++) {
  if (obj1.options[i].selected) { //如果选项被选中,则需要加入到obj2中。
  if (check) { //需要进行重复性检查
  if (optionExists(obj2,obj1.options[i])) { //如果obj2列表框中存在指定的选项,进行下一个循环
  continue;
  }
  }
  var opt = obj1.options[i].cloneNode(false);
  opt.text = obj1.options[i].text;
  obj2.options.add(opt); //将选项加入到ojb2中。
  }
 }
}
//排序,obj为列表框对象,order为排序属性,desc为是否倒序(true-倒序),采用冒泡算法的改进算法
function orderList(obj,order,desc) {
 var chg = null;
 var flag = true; //是否进行过交换的标志
 var m = null;
 var n = null;
 var len = obj.options.length – 1;
 for (var j=len;j>0;j–) {
  flag = true;
  for (var k=0;k<j;k++) {
  eval(“m = parseFloat(obj.options[k].” + order + “);”);
  eval(“n = parseFloat(obj.options[k+1].” + order + “);”);
  if (desc) { //如果是倒序排列,则交换m和n
  var tt = m;
  m = n;
  n = tt;
  }
  if (m > n) { //如果m > n 交换两个选项
  chg = obj.options[k].cloneNode(false);
  chg.text = obj.options[k].text;
  obj.options[k] = obj.options[k+1].cloneNode(false);
  obj.options[k].text = obj.options[k+1].text;
  obj.options[k+1] = chg.cloneNode(false);
  obj.options[k+1].text = chg.text;
  flag = false; //交换过,设为false
  }
  }
  if (flag) break; //如果一次都没有交还,则退出
 }
}
//事件处理
function doEvent() {
 var obj1 = null; //列表框1变量
 if (window.event.srcElement.tagName == “SELECT”) { //如果触发元素是select
  obj1 = window.event.srcElement; //obj为触发的select
 }
 else if (window.event.srcElement.tagName == “OPTION”) { //如果触发元素是option
  obj1 = window.event.srcElement.parentElement; //obj为触发元素的父元素select
 }
 else {
  if (typeof(window.event.srcElement.ref) != “undefined”) { //如果ref被定义过
  obj1 = window.document.getElementById(window.event.srcElement.ref); //obj为定义的元素。
  if (obj1 == null) return;
  }
  else 
  return;
 }
 if (obj1 == null) return; //如果obj为空,直接返回。
 if (obj1.tagName != “SELECT”) return; //如果返回的obj不是列表框,直接返回。
 if (typeof(obj1.ref) == “undefined”) return; //没有指定目的列表框,直接返回。
 var obj2 = window.document.getElementById(obj1.ref);
 if (obj2 == null) return; //没有找到目的列表框,直接返回
 if (obj2.tagName != “SELECT”) return; //指定的目的不是列表框,返回。
 if (typeof(window.event.srcElement.selectall) != “undefined”) { //如果定义了全部选择
  selectAll(obj1);
 }
 var check = (typeof(obj2.check) != “undefined”) ? true : false; //判断是否定义了检查重复项
 add(obj1,obj2,check); //在ojb2中添加obj1中选中的项。
 if (typeof(obj1.deleted) != “undefined”) { //如果定义了删除原项
  deleted(obj1); //删除原项
 }
 if (typeof(obj2.order) != “undefined”) { //指定需要排序
  var order = obj2.order;
  var desc = (typeof(obj2.desc) == “undefined”) ? false : true; //判断是否定义了倒序
  orderList(obj2,order,desc); //排序
 }
}
//处理单击事件
function doClick() {
 if (window.event.srcElement.tagName == “SELECT” || window.event.srcElement.tagName == “OPTION”) return;
 doEvent();
}
//处理双击事件
function doDblClick() {
 doEvent();
}
</script>

点赞