Question

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

虽然选项[1]（或变量[x]如果在变量中）可以全部工作，但您可以看到能够反复点击它的问题（鼠标移出然后进入并单击）。

我只希望每次点击一次。

Answer 1

你有一个ID，所以直接去吧。

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

Answer 2

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;代替，以节省您为每次鼠标悬停所使用的元素编码。

Answer 3

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

...重复 ad nauseam 。

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

3 个答案: