Onmouseup in select box affects scrollbars

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

kmegan - 30 Nov 2007 18:16 GMT

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>

Reply to this Message

Thomas 'PointedEars' Lahn - 30 Nov 2007 20:48 GMT

> 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.
[quoted text clipped - 8 lines]
> <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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / November 2007

Onmouseup in select box affects scrollbars