IE 7 Select Box Issue

S

srt5k

I have a web page with 2 html multiple select boxes on it, and I use
javascript to dynamicaly copy options from one box to another, before
deleting the option from the first box.

My issue is that in IE 7 more often than not after the option value has
been deleted

form.selone.options[index] = null;

the select box resets to the first item in the list, meaning that the
user has to search through the select box again to find the place they
where previously.

This did not occur in IE6 or Mozilla.

The only solution I can find is to set the selectedIndex to the
previous item in the list howeer, this is not ideal.

form.selone.selectedIndex = index-1;

Any ideas would be appreciated.
 
A

ASM

srt5k a écrit :
The only solution I can find is to set the selectedIndex to the
previous item in the list howeer, this is not ideal.

form.selone.selectedIndex = index-1;
Click to expand...

it seems ok
Any ideas would be appreciated.
Click to expand...

without giving the complete code of your copyToDeleteMe function
....
no
 
R

RobG

srt5k said:
I have a web page with 2 html multiple select boxes on it, and I use
javascript to dynamicaly copy options from one box to another, before
deleting the option from the first box.
Click to expand...

You don't have to copy and delete, just assign the option to the other
select, e.g.:

<select id="selA">
<option>selA 0
<option>selA 1
<option>selA 2
<option>selA 3
</select>

<select id="selB">
<option>selB 0
<option>selB 1
<option>selB 2
<option>selB 3
</select>

<button onclick="
var a = document.getElementById('selA');
var b = document.getElementById('selB');
var idx = a.selectedIndex;
b.options[b.options.length] = a.options[idx];
a.selectedIndex = (idx > 0)? idx-1 : 0;
">Move selected A to B</button>
 
S

srt5k

Thanks

I want to remove the option from the previous box so that the user can
only select it once. - This feature only occurs in IE7 - IE6 and
mozilla keeps the first select box scroll bar at the same position in
the select box while IE7 resets it to the top of the list again.

Sorry code as follows...

<html>
<head>
<script language="JavaScript">

function moveOption(form) {

if(form.selone.selectedIndex == -1){
alert("Please select an Option");
}else{

for (var i=0; i<form.selone.options.length;i++)
{

if (form.selone.options.selected)
{

addOption(form.seltwo,form.selone.options.text,form.selone.options.value);
deleteOption(form.selone,i);
}
}
}
}


function addOption(object,text,value) {

var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected,
selected)
object.options[object.length] = optionName;
}

function deleteOption(object,index) {
object.options[index] = null;
}



</script>

</head>
<body>
<form name="frmMain">
<select name="selone" size="5" style="width:180;height:100;">
<option value=0>0</option>
<option value=10>10</option>
<option value=20>20</option>
<option value=30>30</option>
<option value=40>40</option>
<option value=50>50</option>
<option value=60>60</option>
<option value=70>70</option>
<option value=80>80</option>
<option value=90>90</option>
<option value=100>100</option>
</select>

Button
<input type="button" name="BtnAdd" value=">>"
onClick="moveOption(frmMain);" >

<select name="seltwo" size="5" style="width:180;height:100;">
</select>



</form>
</body>
</html>




srt5k said:
I have a web page with 2 html multiple select boxes on it, and I use
javascript to dynamicaly copy options from one box to another, before
deleting the option from the first box.
Click to expand...

You don't have to copy and delete, just assign the option to the other
select, e.g.:

<select id="selA">
<option>selA 0
<option>selA 1
<option>selA 2
<option>selA 3
</select>

<select id="selB">
<option>selB 0
<option>selB 1
<option>selB 2
<option>selB 3
</select>

<button onclick="
var a = document.getElementById('selA');
var b = document.getElementById('selB');
var idx = a.selectedIndex;
b.options[b.options.length] = a.options[idx];
a.selectedIndex = (idx > 0)? idx-1 : 0;
">Move selected A to B</button>
Click to expand...
 
S

srt5k

Think it has been tested in IE

It doesn't use the same option twice it creates a new option based on
the existing 1

var optionName = new Option(text, value, defaultSelected,
selected)

It has been working fine for a couple of years but I have only been
getting issues when some users started using IE7.



Duncan said:
RobG said:
srt5k said:
I have a web page with 2 html multiple select boxes on it, and I use
javascript to dynamicaly copy options from one box to another, before
deleting the option from the first box.
Click to expand...

You don't have to copy and delete, just assign the option to the other
select, e.g.:

<select id="selA">
<option>selA 0
<option>selA 1
<option>selA 2
<option>selA 3
</select>

<select id="selB">
<option>selB 0
<option>selB 1
<option>selB 2
<option>selB 3
</select>

<button onclick="
var a = document.getElementById('selA');
var b = document.getElementById('selB');
var idx = a.selectedIndex;
b.options[b.options.length] = a.options[idx];
a.selectedIndex = (idx > 0)? idx-1 : 0;
">Move selected A to B</button>
Click to expand...

I bet you didn't test that on IE.

IE won't let you assign an option to more than one select box at a time.
You'll get a javascript error if you try. You can possibly get away with:

var opt = a.options[idx];
a.options[idx] = null;
b.options[b.options.length] = opt;

except I have a vague memory that with IE6 reusing options can sometimes go
horribly wrong. Previously I've ended up storing an array of [value,label]
pairs and creating a new option element each time I want to use it. Sorry I
can't remember the details of the problem. If I'm correct about there being
issues then the OP's copying is probably the safest way of avoiding
trouble.
Click to expand...
 
S

srt5k

That's great thanks Duncan,

Yeah think I'll either have to live with setting the selctedIndex to
the previous item, or I might try and replicate it with css &
javascript.

Thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Multi select options in a menu 1
select box, selectedIndex problems 2
Dependent Drop Downs 1
Survey details won't go through using php, ajax, Mysql 0
Fix for IE select/option issue 11
Can't execute php to delete multiple rows in database 3
IE 6 versus IE 7 problem 1
Onmouseup in select box affects scrollbars 1

Members online

Total: 28 (members: 1, guests: 27)
Robots: 144

Forum statistics

Threads
473,772
Messages
2,569,588
Members
45,100
Latest member
MelodeeFaj

Latest Threads

Top