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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Moving items from one list to another 1
- Thread starter gameon
- Start date
EdwardMartinIII
Technical User
By moving, do you mean something like this:
List1:
Red
Orange
Yellow
Green
List2:
Artichokes
Bratwurst
Crusts
Doubledecker Sandwiches
Then, you select "Green" from the first list and click the ">" button and you end up with:
List1:
Red
Orange
Yellow
List2:
Green
Artichokes
Bratwurst
Crusts
Doubledecker Sandwiches
Like that?
Cheers,
![[monkey]](/data/assets/smilies/monkey.gif "[monkey] [monkey]")
Edward
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
List1:
Red
Orange
Yellow
Green
List2:
Artichokes
Bratwurst
Crusts
Doubledecker Sandwiches
Then, you select "Green" from the first list and click the ">" button and you end up with:
List1:
Red
Orange
Yellow
List2:
Green
Artichokes
Bratwurst
Crusts
Doubledecker Sandwiches
Like that?
Cheers,
Edward "Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
- Thread starter
- #3
EdwardMartinIII
Technical User
So, you already have your web page populating the listboxes from tables in the database? If so, then it's a matter of juggling the table contents, then telling your page to refresah the listboxes, right?
Cheers,
Edward
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
Cheers,
Edward "Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
- Thread starter
- #5
EdwardMartinIII
Technical User
I must think on this, but part of that thinking will be going over: faq216-335
So, you might want to see if that's helpful to you. I've been trying to bullwhip this same functionality on a project of my own and haven't been terribly successful.
I'll let you know if I figure it out, but if someone else has, I hope they mention it here.
Cheers,
Edward
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
So, you might want to see if that's helpful to you. I've been trying to bullwhip this same functionality on a project of my own and haven't been terribly successful.
I'll let you know if I figure it out, but if someone else has, I hope they mention it here.
Cheers,
Edward "Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
- Thread starter
- #7
-
1
- #8
there is a simple little way to do this that is cross browser.
Here is the jist of it. Something to make you guys wonder about what else I will come up with! I'll be coding something better but that can probably give you guys an idea while I code something else!
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect, index)
{
var index = (index == null) ? sourceSelect.selectedIndex : -1 ;
if (index == -1)
{
alert("Please select one item to move"
return
}
var option = sourceSelect.options[index]
var temp = new Option(option.text, option.value)
sourceSelect.options[index] = null
targetSelect.options[targetSelect.options.length] = temp
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7">
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)">
<select name="sel2" size="7">
</select>
</FORM>
</BODY>
</HTML>
PS: Edward, why didn't you ask if you had problems with a script?
Gary Haran
==========================
Here is the jist of it. Something to make you guys wonder about what else I will come up with! I'll be coding something better but that can probably give you guys an idea while I code something else!
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect, index)
{
var index = (index == null) ? sourceSelect.selectedIndex : -1 ;
if (index == -1)
{
alert("Please select one item to move"
return
}
var option = sourceSelect.options[index]
var temp = new Option(option.text, option.value)
sourceSelect.options[index] = null
targetSelect.options[targetSelect.options.length] = temp
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7">
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)">
<select name="sel2" size="7">
</select>
</FORM>
</BODY>
</HTML>
PS: Edward, why didn't you ask if you had problems with a script?
Gary Haran
==========================
Ok so here is another similar script that is more flexible. You can have multiple options selected or just a single one!
I hope you guys enjoy this!
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect)
{
var index = new Array()
for (var i = 0; i < sourceSelect.options.length; i++)
{
if (sourceSelect.options.selected)
{
index.push(i)
}
}
if (index.lenght == 0)
{
alert("Please select at least one item to move"
return
}
while(index.length != 0)
{
var i = index.pop()
var option = sourceSelect.options
var temp = new Option(option.text, option.value)
sourceSelect.options = null
targetSelect.options[targetSelect.options.length] = temp
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7" multiple>
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
<option value="4">Sling</option>
<option value="5">Amarreto Sour</option>
<option value="6">Southern Comfort</option>
<option value="7">Amarula</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)" value=">>">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sel1)" value="<<">
<select name="sel2" size="7" multiple>
</select>
</FORM>
</BODY>
</HTML>
PS : Edward, Shadows of Forgotten Ancestors by Carl Sagan and Ann Druyan is awesome!
Gary Haran
==========================
I hope you guys enjoy this!
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect)
{
var index = new Array()
for (var i = 0; i < sourceSelect.options.length; i++)
{
if (sourceSelect.options.selected)
{
index.push(i)
}
}
if (index.lenght == 0)
{
alert("Please select at least one item to move"
return
}
while(index.length != 0)
{
var i = index.pop()
var option = sourceSelect.options
var temp = new Option(option.text, option.value)
sourceSelect.options = null
targetSelect.options[targetSelect.options.length] = temp
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7" multiple>
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
<option value="4">Sling</option>
<option value="5">Amarreto Sour</option>
<option value="6">Southern Comfort</option>
<option value="7">Amarula</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)" value=">>">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sel1)" value="<<">
<select name="sel2" size="7" multiple>
</select>
</FORM>
</BODY>
</HTML>
PS : Edward, Shadows of Forgotten Ancestors by Carl Sagan and Ann Druyan is awesome!
Gary Haran
==========================
- Thread starter
- #10
excellent!!
I tried adding something so that I could swap the vals round by it got angary with me?
-------------------------------------------------------<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect, index)
{
var index = (index == null) ? sourceSelect.selectedIndex : -1 ;
if (index == -1)
{
alert("Please select one item to move"
return
}
var option = sourceSelect.options[index]
var temp = new Option(option.text, option.value)
sourceSelect.options[index] = null
targetSelect.options[targetSelect.options.length] = temp
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7">
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sell)">
<select name="sel2" size="7">
</select>
</FORM>
</BODY>
</HTML>
I tried adding something so that I could swap the vals round by it got angary with me?
-------------------------------------------------------<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect, index)
{
var index = (index == null) ? sourceSelect.selectedIndex : -1 ;
if (index == -1)
{
alert("Please select one item to move"
return
}
var option = sourceSelect.options[index]
var temp = new Option(option.text, option.value)
sourceSelect.options[index] = null
targetSelect.options[targetSelect.options.length] = temp
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7">
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sell)">
<select name="sel2" size="7">
</select>
</FORM>
</BODY>
</HTML>
- Thread starter
- #11
- Thread starter
- #12
Sorry I had forgotten to uncheck Process TGML
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect)
{
var index = new Array()
for (var i = 0; i < sourceSelect.options.length; i++)
{
if (sourceSelect.options.selected)
{
index.push(i)
}
}
if (index.lenght == 0)
{
alert("Please select at least one item to move"
return
}
while(index.length != 0)
{
var i = index.pop()
var option = sourceSelect.options
var temp = new Option(option.text, option.value)
sourceSelect.options = null
targetSelect.options[targetSelect.options.length] = temp
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7" multiple>
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
<option value="4">Sling</option>
<option value="5">Amarreto Sour</option>
<option value="6">Southern Comfort</option>
<option value="7">Amarula</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)" value=">>">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sel1)" value="<<">
<select name="sel2" size="7" multiple>
</select>
</FORM>
</BODY>
</HTML>
Gary Haran
==========================
<HTML>
<HEAD>
<SCRIPT>
function moveOption(sourceSelect, targetSelect)
{
var index = new Array()
for (var i = 0; i < sourceSelect.options.length; i++)
{
if (sourceSelect.options.selected)
{
index.push(i)
}
}
if (index.lenght == 0)
{
alert("Please select at least one item to move"
return
}
while(index.length != 0)
{
var i = index.pop()
var option = sourceSelect.options
var temp = new Option(option.text, option.value)
sourceSelect.options = null
targetSelect.options[targetSelect.options.length] = temp
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<select name="sel1" size="7" multiple>
<option value="0">Beer</option>
<option value="1">Vodka</option>
<option value="2">Wine</option>
<option value="3">Wiskey</option>
<option value="4">Sling</option>
<option value="5">Amarreto Sour</option>
<option value="6">Southern Comfort</option>
<option value="7">Amarula</option>
</select>
<input type="button" onclick="moveOption(document.myForm.sel1, document.myForm.sel2)" value=">>">
<input type="button" onclick="moveOption(document.myForm.sel2, document.myForm.sel1)" value="<<">
<select name="sel2" size="7" multiple>
</select>
</FORM>
</BODY>
</HTML>
Gary Haran
==========================
- Thread starter
- #14
- Thread starter
- #16
- Thread starter
- #17
Great script Gary...
Once I've moved some options over to the new select, the same number of options are highlighted in the old (highlighing values that have now moved up into the old positions)... What's the best way to prevent this highlighting?
Thanks,
~Lindsay
Once I've moved some options over to the new select, the same number of options are highlighted in the old (highlighing values that have now moved up into the old positions)... What's the best way to prevent this highlighting?
Thanks,
~Lindsay
Great script Gary,
I often find myself challenged with how to do things. Yet I try not to post for an answer ( being relatively new to javascript I find that I can retain the lesson better when I figure out things by working them out ) however, I would not be able to overcome the problems if it was not for the input that you and others do in this forum that gives me a path to follow. That and referring to the books! (*) you deserve it.
Brian
I often find myself challenged with how to do things. Yet I try not to post for an answer ( being relatively new to javascript I find that I can retain the lesson better when I figure out things by working them out ) however, I would not be able to overcome the problems if it was not for the input that you and others do in this forum that gives me a path to follow. That and referring to the books! (*) you deserve it.
Brian
- Status
Similar threads
- Locked
- Question