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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Delete Contents of Dynamic Select box

Status
Not open for further replies.
timmbo

timmbo

Programmer
Feb 22, 2001
167
0
0
US
Hi Everyone,

My apologies for the verbose question. But I have to give alittle back ground.

I have two selection boxes one populated by the database and the other empty. The user has the ability to select items from the populated selection box and move them to the unpopulated selection box via button keys.

My question/problem:

I have a button called clear. When the user hits this button, I would like the contents of the originally unpopuated select box to be deleted. How would I go about completed this. My unpopulated select box doesn't have any <options> tags. Items are dynamic.

Hope I am making sense with my question. If anyone needs more clarification, please let me know. Any help would be most appreciated.

TIA --
 
Sort by date Sort by votes
Timmbo,

Here is some code I picked off the Internet provided by I would probably use one of the &quot;for loops&quot; in the function down below to clear that control since it is already removing selected options from the list.

Fengshui_1998




<Html>
<!-- TWO STEPS TO INSTALL MENU SWAPPER:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!-- Original: Phil Webb (phil@philwebb.com) -->
<!-- Web Site: -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;

for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options.text] = tbox.options.value;
arrTbox = tbox.options.text;
}

var fLength = 0;
var tLength = arrTbox.length;

for (i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options.text] = fbox.options.value;
if (fbox.options.selected && fbox.options.value != &quot;&quot;) {
arrTbox[tLength] = fbox.options.text; tLength++;
}
else {
arrFbox[fLength] = fbox.options.text; fLength++;
}
}

arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for (c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for (c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<form name=&quot;combo_box&quot;>
<table><tr><td>
<select multiple size=&quot;10&quot; name=&quot;list1&quot; style=&quot;width:150&quot;>
<option value=&quot;12&quot;>Alabama</option>
<option value=&quot;54&quot;>Alaska</option>
<option value=&quot;65&quot;>Arizona</option>
<option value=&quot;45&quot;>Arkansas</option>
<option value=&quot;2&quot;>California</option>
<option value=&quot;6&quot;>Colorado</option>
<option value=&quot;81&quot;>Connecticut</option>
<option value=&quot;5&quot;>Delaware</option>
<option value=&quot;23&quot;>District of Columbia</option>
<option value=&quot;58&quot;>Florida</option>
<option value=&quot;87&quot;>Georgia</option>
<option value=&quot;98&quot;>Hawaii</option>
<option value=&quot;53&quot;>Idaho</option>
<option value=&quot;22&quot;>Illinois</option>
<option value=&quot;28&quot;>Indiana</option>
<option value=&quot;89&quot;>Iowa</option>
<option value=&quot;71&quot;>Kansas</option>
<option value=&quot;35&quot;>Kentucky</option>
<option value=&quot;85&quot;>Louisiana</option>
<option value=&quot;9&quot;>Maine</option>
<option value=&quot;7&quot;>Maryland</option>
<option value=&quot;77&quot;>Massachusetts</option>
<option value=&quot;36&quot;>Michigan</option>
<option value=&quot;87&quot;>Minnesota</option>
<option value=&quot;66&quot;>Mississippi</option>
<option value=&quot;34&quot;>Missouri</option>
<option value=&quot;50&quot;>Montana</option>
<option value=&quot;20&quot;>Nebraska</option>
<option value=&quot;25&quot;>Nevada</option>
<option value=&quot;32&quot;>New Hampshire</option>
<option value=&quot;27&quot;>New Jersey</option>
<option value=&quot;74&quot;>New Mexico</option>
<option value=&quot;17&quot;>New York</option>
<option value=&quot;3&quot;>North Carolina</option>
<option value=&quot;13&quot;>North Dakota</option>
<option value=&quot;4&quot;>Ohio</option>
<option value=&quot;21&quot;>Oklahoma</option>
<option value=&quot;12&quot;>Oregon</option>
<option value=&quot;48&quot;>Pennsylvania</option>
<option value=&quot;63&quot;>Rhode Island</option>
<option value=&quot;82&quot;>South Carolina</option>
<option value=&quot;14&quot;>South Dakota</option>
<option value=&quot;72&quot;>Tennessee</option>
<option value=&quot;49&quot;>Texas</option>
<option value=&quot;47&quot;>Utah</option>
<option value=&quot;92&quot;>Vermont</option>
<option value=&quot;59&quot;>Virginia</option>
<option value=&quot;52&quot;>Washington</option>
<option value=&quot;41&quot;>West Virginia</option>
<option value=&quot;46&quot;>Wisconsin</option>
<option value=&quot;95&quot;>Wyoming</option>
</select>
</td>
<td align=&quot;center&quot; valign=&quot;middle&quot;>
<input type=&quot;button&quot; onClick=&quot;move(this.form.list2,this.form.list1)&quot; value=&quot;<<&quot;>
<input type=&quot;button&quot; onClick=&quot;move(this.form.list1,this.form.list2)&quot; value=&quot;>>&quot;>
</td>
<td>
<select multiple size=&quot;10&quot; name=&quot;list2&quot; style=&quot;width:150&quot;>
</select>
</td></tr></table>
</form>

<p><center>
<font face=&quot;arial, helvetica&quot; size&quot;-2&quot;>Free JavaScripts provided<br>
by <a href=&quot; JavaScript Source</a></font>
</center><p>

<!-- Script Size: 4.75 KB -->
</body>
</html>
 
Upvote 0 Downvote
Code: 
function ClearCombo()
{
  for (var i=document.FormName.SelectName.options.length-1; i>=0; i--)
  {
    document.FormName.SelectName.options[i] = null;
  }
  document.FormName.SelectName.selectedIndex = -1;
  
}
 
Upvote 0 Downvote
Thanks for the assistance everyone!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
269
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
139
coldbohemia
coldbohemia
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
48
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top