K
kmegan
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>
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>