Prev: change the text of browse button in file upload control
Next: Change the src of an Iframe.
From: kmegan on 30 Nov 2007 13:16
Hi,

I'm not sure if this is the appropriate group or not.

My problem is that I'm trying to simulate a drag and drop between
select boxes. So when the user presses the mouse down in one select
box and releases it in another, the items selected from the first
select box are added to the second box. The items add fine if they are
added "onclick" but it doesn't seem to cooperate when I add the items
during the "onmouseup" event. The entire page locks up. I can't scroll
the select box, can't refresh the page, nothing. Only after I click
inside the select box can I click on anything. Any help anyone can
offer would be most appreciated. Below is the code.

Thanks.

<html>
<head>
<script language="javascript">
function addItem(){
var fromBox = document.getElementById("Select1");
if (fromBox.selectedIndex > -1) {
var fromItem = fromBox.options[fromBox.selectedIndex];
var objOption = document.createElement("OPTION")
var toBox = document.getElementById("Select2");
toBox.options.add(objOption)
objOption.innerText = fromItem.text
objOption.value = fromItem.value;
fromBox.options[fromBox.selectedIndex] = null;
return false;
}

}
</script>
</head>
<body>
<select id="Select1" size=5>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

<select id="Select2" size=5 onmouseup="addItem()">
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
</select>
</body>
</html>
From: Thomas 'PointedEars' Lahn on 30 Nov 2007 15:48
kmegan wrote:
> I'm not sure if this is the appropriate group or not.

Yes, it is. As client-side DOM scripting is primarily performed
with ECMAScript implementations, that is on-topic here.

> [...] The items add fine if they are added "onclick" but it doesn't
> seem to cooperate when I add the items during the "onmouseup" event.
> The entire page locks up. I can't scroll the select box, can't
> refresh the page, nothing. Only after I click inside the select box
> can I click on anything. Any help anyone can offer would be most
> appreciated. Below is the code.
>
> Thanks.
>
> <html>
> <head>
> <script language="javascript">

Should be at least

<script type="text/javascript" ...>

See http://validator.w3.org/

> function addItem(){
> var fromBox = document.getElementById("Select1");
> if (fromBox.selectedIndex > -1) {
> var fromItem = fromBox.options[fromBox.selectedIndex];
> var objOption = document.createElement("OPTION")
> var toBox = document.getElementById("Select2");

You won't need to call this method if you store the reference to the calling
object (`this') onmousedown the source `select' element in a globally
available property. That would also be less error-prone and easier to maintain.

> toBox.options.add(objOption)

Note that the MSHTML DOM and the W3C DOM implement this method differently.
The canonical, although proprietary, way to do this is:

var objOption = new Option(fromItem.text, fromItem.value);
toBox.options[toBox.options.length] = objOption;

See also http://www.quirksmode.org/js/options.html

> objOption.innerText = fromItem.text

`innerText' is MSHTML-proprietary and completely unnecessary here. Try

objOption.text = fromItem.text;

instead.


HTH

PointedEars
 | 
Pages: 1
Prev: change the text of browse button in file upload control
Next: Change the src of an Iframe.