仅在IE上，表单DOM id返回“”;为空或不是对象“;问题

ONLY on IE, form DOM id returns "is null or not an object" problem

本文关键字：问题 对象 IE 表单 DOM id 仅在 返回      更新时间：2023-09-26

您可以在这里看到我的代码：http://www.illyabbi.com/questions/test5.html

<SCRIPT LANGUAGE="JavaScript" SRC="scripts/OptionTransfer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var opt = new OptionTransfer("list1","list2");
opt.setAutoSort(false);
opt.setDelimiter(",");
opt.setStaticOptionRegex("^()$");
opt.saveRemovedLeftOptions("removedLeft");
opt.saveRemovedRightOptions("removedRight");
opt.saveAddedLeftOptions("addedLeft");
opt.saveAddedRightOptions("addedRight");
opt.saveNewLeftOptions("newLeft");
opt.saveNewRightOptions("newRight");
</SCRIPT>
</HEAD>
<BODY onLoad="opt.init(document.forms[0])">
       
<FORM name="challengeitems">    
<a href="#" class="piece03" onmouseover="document.challengeitems.mySelect.options.piece01.selected=true" onmouseout="document.challengeitems.list1.options.piece01.selected=false" onclick="opt.transferRight()">PIECE01</a>
<a href="#" class="piece03" onmouseover="document.challengeitems.mySelect.options[1].selected=true" onmouseout="document.challengeitems.list1.options[1].selected=false" onclick="opt.transferRight()">PIECE02</a>
<a href="#" class="piece03" onmouseover='document.challengeitems.mySelect.options.piece03.selected=true' onmouseout='document.challengeitems.list1.options.piece03.selected=false' onclick="opt.transferRight()">PIECE01</a>
<a href="#" class="piece03" onmouseover="document.challengeitems.mySelect.options[3].selected=true" onmouseout="document.challengeitems.list1.options[3].selected=false" onclick="opt.transferRight()">PIECE02</a>
    <SELECT id="mySelect" NAME="list1" MULTIPLE SIZE=10 onDblClick="opt.transferRight()">
        <OPTION id="piece01" VALUE="PIECE01">PIECE01</OPTION>
        <OPTION id="piece02" VALUE="PIECE02">PIECE02</OPTION>
        <OPTION id="piece03" VALUE="PIECE03">PIECE03</OPTION>
        <OPTION id="piece04" VALUE="PIECE04">PIECE04</OPTION>
        <OPTION id="piece05" VALUE="PIECE05">PIECE05</OPTION>
        <OPTION id="piece06" VALUE="PIECE06">PIECE06</OPTION>
        <OPTION id="piece07" VALUE="PIECE07">PIECE07</OPTION>
        <OPTION id="piece08" VALUE="PIECE08">PIECE08</OPTION>
        <OPTION id="piece09" VALUE="PIECE09">PIECE09</OPTION>
        <OPTION id="piece10" VALUE="PIECE10">PIECE10</OPTION>
        <OPTION id="piece11" VALUE="PIECE11">PIECE11</OPTION>
        <OPTION id="piece12" VALUE="PIECE12">PIECE12</OPTION>
        <OPTION id="a" VALUE="a"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OPTION>
    </SELECT>
    
<!-- RECEIVING BOX -->
    <SELECT NAME="list2" MULTIPLE SIZE=10 onDblClick="opt.transferLeft()">
        <OPTION id="a" VALUE="a"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     </SELECT>
</FORM>
</BODY>
</HTML>

我正试图通过鼠标悬停在倍数中选择特定项目，并使用

onmouseover='document.challengeitems.mySelect.options.piece03.selected=true'

与相反

onmouseover="document.challengeitems.mySelect.options[1].selected=true"

虽然options[1](或options[x]，如果在一个变量中(在所有情况下都有效，但您可以看到能够一次又一次地单击它的问题(鼠标向外移动，然后再向内单击(。

我只希望每个选择都被点击一次。

您有一个ID，所以直接转到它。

document.getElementById('piece03').setAttribute("selected","true")

JS中的事件对象包含一个指向触发事件的元素的链接。如果我正确理解你的问题，你会得到这样的东西：

<select multi height="xxx">
   <option value="1" onmouseover="...">1</option>
   <option value="2" onmouseover="...">2</option>
   <option value="3" onmouseover="...">3</option>
</select>

您可以改为使用onmouseover="event.target.selected = true;，以避免每次鼠标悬停时都要在哪个元素中进行编码。

onmouseover="for(var i=0; i<document.challengeitems.mySelect.options.length; i++) 
  {if (document.challengeitems.mySelect.options[i].id=='piece01')
      document.challengeitems.mySelect.options[i].selected=true;}"

恶心地重复。

相关文章：