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

发布于 2024-12-03 15:42:26 字数 3798 浏览 0 评论 0原文

您可以在此处查看我的代码： 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'

选项[1]（或选项[x]，如果在变量中）一起工作时相反

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

，您可以看到问题能够再次点击它再次（鼠标移出然后移入并单击）。

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

原文

You can see my code in action here: 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("^()quot;);
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">                                             </OPTION>
    </SELECT>
    
<!-- RECEIVING BOX -->
    <SELECT NAME="list2" MULTIPLE SIZE=10 onDblClick="opt.transferLeft()">
        <OPTION id="a" VALUE="a">                                                 </SELECT>

</FORM>
</BODY>
</HTML>

I'm trying to select specific items in a multiple via mouseover and have

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

as opposed to

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

while the options[1] (or options[x] if in a variable) works all across, you can see the problem of being able to click it again and again (mouse out then in and click).

I only want each select to be clicked one time.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

宣告ˉ结束 2024-12-10 15:42:26

你有ID，所以直接去吧。

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

You have an ID, so go directly to it.

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

回复收藏 0 原文

眉目亦如画i 2024-12-10 15:42:26

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; 相反，这样你就不必在你的元素中编码了每次鼠标悬停时都会重新打开。

The event object in JS contains a link to the element that triggered the event. If I'm understanding your problem correctly, you've got something like:

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

You can use onmouseover="event.target.selected = true; instead, to save you having to code in which element you're on for each mouseover.

回复收藏 0 原文

傲鸠 2024-12-10 15:42:26

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;}"

...重复令人恶心。

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;}"

...repeat ad nauseam.

回复收藏 0 原文

~没有更多了~