Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Andrzejek on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Selectbox - pass multiple selected values to a text box
- Thread starter vangundy
- Start date
This quick example has what you need.
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.![[dragon]](/data/assets/smilies/dragon.gif "[dragon] [dragon]")
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Tracy Dryden">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript" type="text/javascript">
function moveEm() {
var sSelected = "";
var theSel = document.forms('myForm').elements('mySel');
for ( var x = 0; x < theSel.options.length; x++ ) {
if ( theSel.options(x).selected ) {
sSelected += ( sSelected == "" ? "" : ";" );
sSelected += theSel.options(x).value;
}
}
document.forms('myForm').elements('myBox').value = sSelected;
}
function clearIt() {
document.forms('myForm').elements('myBox').value = "";
document.forms('myForm').elements('mySel').selectedIndex = -1;
}
</script></head>
<body>
<div align="center">
<form name="myForm">
<select name=mySel size=5 multiple>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="white">white</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
<option value="brown">brown</option>
<option value="turquoise">turquoise</option>
</select>
<br>
<input type=text name="myBox" size=50 value="">
<br>
<input type=button onclick="moveEm()" value="Move Em"> <input type=button onclick="clearIt()" value="Reset">
</body>
</html>Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
...except instead of all the
[tt] document.forms(...).elements(...)[/tt]
you'd want to use
[tt] document.forms[...].elements[...][/tt]
*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
[tt] document.forms(...).elements(...)[/tt]
you'd want to use
[tt] document.forms[...].elements[...][/tt]
*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
Would you believe that code works? I wrote that code, ran it to make sure it works, then just cut&pasted the whole thing here. You're right about the square brackets though. I've been switching back and forth between VB and Javascript lately and constantly get the two mixed up syntax-wise.
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
if by "works" you mean "works only in internet explorer".
*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
Yeah, that's what I meant. It's such a simple program that it didn't seem worth testing in multiple browsers, and I didn't expect to make such a stupid error, and I REALLY didn't expect IE to let it go if I DID make a stupid error.
I'll have to remember that little "gothca".
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
I'll have to remember that little "gothca".
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
- Thread starter
- #7
Try this:
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
Code:
function clearListbox() {
var theSel = document.forms['myForm'].elements['mySel'];
for ( var x = theSel.options.length-1; x >= 0; x-- ) {
theSel.remove(x);
}
}Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
Tracy,
It would. But, it is rather a surprised, I must say. If one not working on select options for a good while, it is most easily forgotten because it deviates normal way of thinking and it is some sort of special rule for it. I remember I once in a brain-code post removing options with the same logic you are using, then I think mwolf came up with .length=0, I immediately realized that it is a valid tweak that did not come straight to my mind.
It is so strange. The length "should" be a read-only property. But then the implementation and standards make it read-write. That's a bit crazy I must say.
[tt]
<html>
<head>
</head>
<body>
<form name="myForm">
<select name=mySel size=5 multiple>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="white">white</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
<option value="brown">brown</option>
<option value="turquoise">turquoise</option>
</select>
</form>
<button onclick="document.myForm.mySel.options.length=0;">remove all options</button>
</body>
</html>
[/tt]
regards - tsuji
It would. But, it is rather a surprised, I must say. If one not working on select options for a good while, it is most easily forgotten because it deviates normal way of thinking and it is some sort of special rule for it. I remember I once in a brain-code post removing options with the same logic you are using, then I think mwolf came up with .length=0, I immediately realized that it is a valid tweak that did not come straight to my mind.
It is so strange. The length "should" be a read-only property. But then the implementation and standards make it read-write. That's a bit crazy I must say.
[tt]
<html>
<head>
</head>
<body>
<form name="myForm">
<select name=mySel size=5 multiple>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="white">white</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
<option value="brown">brown</option>
<option value="turquoise">turquoise</option>
</select>
</form>
<button onclick="document.myForm.mySel.options.length=0;">remove all options</button>
</body>
</html>
[/tt]
regards - tsuji
You're right, it is somewhat counter-intuitive. But as long as it works ...
I'll have to make a note of that so I'll remember it next time I need it.
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
I'll have to make a note of that so I'll remember it next time I need it.
Tracy Dryden
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
BillyRayPreachersSon
Programmer
Setting the length to 0 also works with arrays, and no doubt collections, too. Put this in your URL bar and run for a quick example:
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
Code:
javascript:var myArray = [1, 2, 3, 4, 5]; alert(myArray.length); alert(myArray); myArray.length = 2; alert(myArray);Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
- Thread starter
- #15
- Status
Similar threads
- Locked
- Question