错误: 对象不支持此属性或方法

select对象的应用，全部删除，全部加入都提示“对象不支持此属性或方法”，添加选中等都没问题，请大家帮看看，代码如下：
<html>
<head>
<title>Example:select对象的应用</title>
<script language="javascript">
function selectChange()
{
var allNumber=document.selectForm.allItem.options.length;
for (var i=0;i<allNumber;i++)
{
document.selectForm.allItem.options[0]=null;
}
var selectNumber=document.selectForm.selectedItem.options.length;for (var i=0;i<selectNumber;i++)
{
document.selectForm.selectedItem.options[0]=null;
}
if(document.selectForm.profession.options[document.selectForm.profession.selectedIndex].text=="学生")
{
document.selectForm.allItem.options[0]=new Option("数学","数学");
document.selectForm.allItem.options[1]=new Option("语文","语文");
document.selectForm.allItem.options[2]=new Option("英语","英语");
document.selectForm.allItem.options[3]=new Option("Java基础","Java基础");
document.selectForm.allItem.options[4]=new Option("JavaScript应用","JavaScript应用");
}
else if (document.selectForm.profession.options[document.selectForm.profession.selectedIndex].text=="运动员")
{
document.selectForm.allItem.options[0]=new Option("足球","足球");
document.selectForm.allItem.options[1]=new Option("篮球","篮球");
document.selectForm.allItem.options[2]=new Option("篮球","篮球");
document.selectForm.allItem.options[3]=new Option("网球","网球");
document.selectForm.allItem.options[4]=new Option("羽毛球","羽毛球");
document.selectForm.allItem.options[5]=new Option("游泳","游泳");
document.selectForm.allItem.options[6]=new Option("武术","武术");
document.selectForm.allItem.options[7]=new Option("登山","登山");
}
}function checkData(selectedItem)
{
var flag=true;
for(var i=0;i<document.selectForm.selectedItem.options.length;i++)
{
if(document.selectForm.selectedItem.options[i].text==selectedItem.text)
{
flag=false;
break;
}
}
return flag;
}
function addSelectedItem()
{for(var i=0;i<document.selectForm.allItem.options.length;i++)
{
if(document.selectForm.allItem.options[i].selected)
{
if(checkData(document.selectForm.allItem.options[i]))
{
document.selectForm.selectedItem.options[document.selectForm.selectedItem.length]=new Option(document.selectForm.allItem.options[i].text,document.selectForm.allItem.options[i].value);
}
}
}
}
function addAll()
{
for(var i=0;i<document.selectForm.selectedItem.options.length;i++)
{
document.selectForm.selectedItem.options[i]=null;
}
for(var i=0;i<document.selectForm.allItem.options.length;i++)
{
document.selectForm.selectedItem.options[i]=new Option(document.selectForm.allItem.options[i].text,document.selectForm.allItem.options[i].value);
}
}
function deleteSelectedItem()
{
for(var i=0;i<document.selectForm.selectedItem.options.length;i++)
{
  if(document.selectForm.selectedItem.options[i].selected)
  {
    document.selectForm.selectedItem.options[i]=null;
}
}
}
function deleteAll()
{
  var number=document.selectForm.selectedItem.options.length
  for(var i=0;i<number;i++)
  {
    document.selectForm.selectedItem.options[0]=null;
}
}
</script>
</head>
<body>
<form name="selectForm">
<h5><font size="3">Example:select对象的应用</font></h5>
<hr />
<b><font size="3">&nbsp;选择用户类别:</font></b>
<select size="1" name="profession" style="border-style:solid; width:150; height:1" onChange="selectChange()">
<option value="学生" selected>学生</option>
<option value="运动员">运动员</option>
</select>
<br /><br />
<b><font size="3">&nbsp;请选择您曾经学过的课程或者参与过的项目(根据用户类别)
</font></b>
<table border="0" width="560" id="table1" height="210">
<tr>
<td width="180" rowspan="6" height="204" align="center">
<select size="3" name="allItem" multiple style="width:150">
<option value="数学">数学</option>
<option value="语文">语文</option>
<option value="英语">英语</option>
<option value="Java基础">Java基础</option>
<option value="JavaScript应用">JavaScript应用</option>
</select>
</td>
<td width="200" height="30"></td>
<td width="180" rowspan="6" height="204" align="center">
<select size="13" name="selectedItem" multiple style="width:150"></select>
</td>
</tr>
<tr>
<td width="200" height="30" align="center">
<input type="button" value="添加选中" name="addSelect" style="width:100;height=25" onClick="addSelectedItem()" />
</td>
</tr>
<tr>
<td width="200" height="30" align="center">
<input type="button" value="添加全部" name="addAll" style="width:100;height=25" onClick="addAll()" />
</td>
</tr>
<tr>
<td width="200" height="30" align="center">
<input type="button" value="删除选中" name="deleteSelect" style="width:100;height=25" onClick="deleteSelectedItem()" />
</td>
</tr>
<tr>
<td width="200" height="30" align="center">
<input type="button" value="删除全部" name="deleteAll" style="width:100;height=25" onClick="deleteAll()" />
</td>
</tr>
<tr>
<td width="145" height="37" align="center"></td>
</tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

    按钮中名字与调用的方法同名了，导致dom无法正确判断和查找，改个名字就ok了
    ps:按钮的样式style="width:100;height=25" 应该为style="width:100px;height:25px"  使用：来设置，而不是等号，加个单位px，否则非ie无法识别<html> 
    <head> 
    <title>Example:select对象的应用 </title> 
    <script type="text/javascript"> 
    function selectChange() {
        var allNumber = document.selectForm.allItem.options.length;
        for (var i = 0; i < allNumber; i++) {
            document.selectForm.allItem.options[0] = null
        }
        var selectNumber = document.selectForm.selectedItem.options.length;
        for (var i = 0; i < selectNumber; i++) {
            document.selectForm.selectedItem.options[0] = null
        }
        if (document.selectForm.profession.options[document.selectForm.profession.selectedIndex].text == "学生") {
            document.selectForm.allItem.options[0] = new Option("数学", "数学");
            document.selectForm.allItem.options[1] = new Option("语文", "语文");
            document.selectForm.allItem.options[2] = new Option("英语", "英语");
            document.selectForm.allItem.options[3] = new Option("Java基础", "Java基础");
            document.selectForm.allItem.options[4] = new Option("JavaScript应用", "JavaScript应用")
        } else if (document.selectForm.profession.options[document.selectForm.profession.selectedIndex].text == "运动员") {
            document.selectForm.allItem.options[0] = new Option("足球", "足球");
            document.selectForm.allItem.options[1] = new Option("篮球", "篮球");
            document.selectForm.allItem.options[2] = new Option("篮球", "篮球");
            document.selectForm.allItem.options[3] = new Option("网球", "网球");
            document.selectForm.allItem.options[4] = new Option("羽毛球", "羽毛球");
            document.selectForm.allItem.options[5] = new Option("游泳", "游泳");
            document.selectForm.allItem.options[6] = new Option("武术", "武术");
            document.selectForm.allItem.options[7] = new Option("登山", "登山")
        }
    }
    function checkData(selectedItem) {
        var flag = true;
        for (var i = 0; i < document.selectForm.selectedItem.options.length; i++) {
            if (document.selectForm.selectedItem.options[i].text == selectedItem.text) {
                flag = false;
                break
            }
        }
        return flag
    }
    function addSelectedItem() {
        for (var i = 0; i < document.selectForm.allItem.options.length; i++) {
            if (document.selectForm.allItem.options[i].selected) {
                if (checkData(document.selectForm.allItem.options[i])) {
                    document.selectForm.selectedItem.options[document.selectForm.selectedItem.length] = new Option(document.selectForm.allItem.options[i].text, document.selectForm.allItem.options[i].value)
                }
            }
        }
    }
    function addAll1() {
        for (var i = 0; i < document.selectForm.selectedItem.options.length; i++) {
            document.selectForm.selectedItem.options[i] = null
        }
        for (var i = 0; i < document.selectForm.allItem.options.length; i++) {
            document.selectForm.selectedItem.options[i] = new Option(document.selectForm.allItem.options[i].text, document.selectForm.allItem.options[i].value)
        }
    }
    function deleteSelectedItem() {
        for (var i = 0; i < document.selectForm.selectedItem.options.length; i++) {
            if (document.selectForm.selectedItem.options[i].selected) {
                document.selectForm.selectedItem.options[i] = null
            }
        }
    }
    function deleteAll1() {
        var number = document.selectForm.selectedItem.options.length
        for (var i = 0; i < number; i++) {
            document.selectForm.selectedItem.options[0] = null
        }
    }
    </script> 
    </head> 
    <body> 
    <form name="selectForm"> 
    <h5> <font size="3">Example:select对象的应用 </font> </h5> 
    <hr /> 
    <b> <font size="3">&nbsp;选择用户类别: </font> </b> 
    <select size="1" name="profession" style="border-style:solid; width:150; height:1" onChange="selectChange()"> 
    <option value="学生" selected>学生 </option> 
    <option value="运动员">运动员 </option> 
    </select> 
    <br /> <br /> 
    <b> <font size="3">&nbsp;请选择您曾经学过的课程或者参与过的项目(根据用户类别) 
    </font> </b> 
    <table border="0" width="560" id="table1" height="210"> 
    <tr> 
    <td width="180" rowspan="6" height="204" align="center"> 
    <select size="3" name="allItem" multiple style="width:150"> 
    <option value="数学">数学 </option> 
    <option value="语文">语文 </option> 
    <option value="英语">英语 </option> 
    <option value="Java基础">Java基础 </option> 
    <option value="JavaScript应用">JavaScript应用 </option> 
    </select> 
    </td> 
    <td width="200" height="30"> </td> 
    <td width="180" rowspan="6" height="204" align="center"> 
    <select size="13" name="selectedItem" multiple style="width:150"> </select> 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="30" align="center"> 
    <input type="button" value="添加选中" name="addSelect" style="width:100px;height;25px" onclick="addSelectedItem()" /> 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="30" align="center"> 
    <input type="button" value="添加全部" name="addAll" style="width:100;height:25px" onclick="addAll1()" /> 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="30" align="center"> 
    <input type="button" value="删除选中" name="deleteSelect" style="width:100px;height:25px" onClick="deleteSelectedItem()" /> 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="30" align="center"> 
    <input type="button" value="删除全部" name="deleteAll" style="width:100;height=25" onClick="deleteAll1()" /> 
    </td> 
    </tr> 
    <tr> 
    <td width="145" height="37" align="center"> </td> 
    </tr> 
    </table> 
    </form> 
    </body> 
    </html>