JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

Store contents of drop down box into var, then load the new dropdown box from var


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 24th, 2013, 01:48 PM
Jason_Kelly Jason_Kelly is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2012
Posts: 23 Jason_Kelly User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0
Store contents of drop down box into var, then load the new dropdown box from var
Hello,

I need the help of an expert here on this forum.

1.) How can I use javascript to save the contents of box1 and store it into a variable (x), separating them all by commas? Since I will be doing some database work in the backend, it is important that the values are stored using this method.

Example of whats in the drop down box:
[BOX1]
volvo
saab
mercedes
audi

Resulting var:
var x = volvo,saab,mercedes,audi

2.) Using the variable (x), how can I repopulate the drop down [BOX2] with the comma separated values?

Example of what Box 2 should look like:

[BOX2]
volvo
saab
mercedes
audi

Code:
<!DOCTYPE html>

<html>

<head>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input type="button" value="Save" name="Save">

<br><br>

<input type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>


Much thanks and appreciation for all your help and support.

Cheers,

Jay
Reply With Quote
  #2  
Old January 24th, 2013, 02:24 PM
web_loone08's Avatar
web_loone08 web_loone08 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2008
Posts: 656 web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 2 Days 7 h 3 m
Reputation Power: 69
Code:
<!DOCTYPE html>

<html>

<head>

<script>
var storage = new Array();
var i = -1;
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var cars = document.getElementById("box1").value;
storage.push(cars);
}
document.getElementById("Pop").onclick = function() {
i++;
var opt = document.createElement("option");
opt.value = storage[i];
document.getElementById("box2").style.textTransform="capitalize";
opt.innerHTML = storage[i];
document.getElementById("box2").appendChild(opt);
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>


Or... you may be looking for something like this:

Code:
<!DOCTYPE html>

<html>

<head>

<script>
var storage = new Array();
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var cars = document.getElementById("box1").value;
storage.push(cars);
}
document.getElementById("Pop").onclick = function() {
document.getElementById("box2").innerHTML="";
document.getElementById("box2").style.textTransform="capitalize";
for (i=0;i<=storage.length-1;i++) {
var opt = document.createElement("option");
opt.value = storage[i];
opt.innerHTML = storage[i];
document.getElementById("box2").appendChild(opt);
}
storage = [];
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>
Last edited by web_loone08 : January 24th, 2013 at 02:39 PM.
Reply With Quote
  #3  
Old January 24th, 2013, 03:20 PM
Jason_Kelly Jason_Kelly is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2012
Posts: 23 Jason_Kelly User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0
Thanks very much Loone,

Close and almost there.

I tried both instances of your code, it did work, but only the first value showed up in the second box. The rest of the select box items did not appear.

I am forceably using IE7 if that helps.

Cheers,

Jay
Reply With Quote
  #4  
Old January 24th, 2013, 03:34 PM
web_loone08's Avatar
web_loone08 web_loone08 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2008
Posts: 656 web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 2 Days 7 h 3 m
Reputation Power: 69
Just tested in IE, do not see anything wrong with the code. The code that I provided you; will only insert the values (of the options, that you selected from the first select menu), into the second select menu.

Edit: Oh... I see what you want... you want an exact replicate of the first select menu; in the second select menu... is that correct? If that is what your wanting; then do this:

Code:
<!DOCTYPE html>

<html>

<head>

<script>
var storage;
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var cars = document.getElementById("box1").innerHTML;
storage = cars;
}
document.getElementById("Pop").onclick = function() {
document.getElementById("box2").innerHTML = storage;
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>
Last edited by web_loone08 : January 24th, 2013 at 03:45 PM.
Reply With Quote
  #5  
Old January 24th, 2013, 03:41 PM
Jason_Kelly Jason_Kelly is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2012
Posts: 23 Jason_Kelly User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0
Thanks Loon,

Correct, I wish to mimic and duplicate the contents of the box.
Reply With Quote
  #6  
Old January 24th, 2013, 03:51 PM
Jason_Kelly Jason_Kelly is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2012
Posts: 23 Jason_Kelly User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0
Hi Loon,

I tried your revised code, but now it just leaves the box2 empty.


Quote:
Originally Posted by web_loone08
Just tested in IE, do not see anything wrong with the code. The code that I provided you; will only insert the values (of the options, that you selected from the first select menu), into the second select menu.

Edit: Oh... I see what you want... you want an exact replicate of the first select menu; in the second select menu... is that correct? If that is what your wanting; then do this:

Code:
<!DOCTYPE html>

<html>

<head>

<script>
var storage;
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var cars = document.getElementById("box1").innerHTML;
storage = cars;
}
document.getElementById("Pop").onclick = function() {
document.getElementById("box2").innerHTML = storage;
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>
Reply With Quote
  #7  
Old January 24th, 2013, 04:36 PM
web_loone08's Avatar
web_loone08 web_loone08 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2008
Posts: 656 web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level)web_loone08 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 2 Days 7 h 3 m
Reputation Power: 69
My fault; I forgot that IE would not let you do that. This should work in IE and all other browsers:

Code:
<!DOCTYPE html>

<html>

<head>

<script>
var storage = new Array();
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var opts = document.getElementById("box1").getElementsByTagName("option");
for (i=0;i<=opts.length-1;i++) {
storage.push(opts[i].value);
}
this.disabled="true";
}
document.getElementById("Pop").onclick = function() {
document.getElementById("box2").innerHTML="";
for (ii=0;ii<=storage.length-1;ii++) {
var new_opts = document.createElement("option");
document.getElementById("box2").style.textTransform="capitalize";
new_opts.value = storage[ii];
new_opts.innerHTML = storage[ii];
document.getElementById("box2").appendChild(new_opts);
}
storage = [];
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>


Also..., I disabled the "Save" button once it's clicked; otherwise IE will insert duplicate options. The only way around that would be to validate the option values from the first select menu, with indexOf, against the storage array key(s); before you populate the second select menu or you could just totally get rid of the second select menu and/or option elements, by removing it from the DOM with removeChild and rebuild it again, from scratch.

Different Approach (Besides Disabling Button)

This should do the trick; with fixing the inserting duplicate options, in IE... without disabling the "Save" button.

Code:
<!DOCTYPE html>

<html>

<head>

<script>
var maxOpts, maxStore;
var storage = new Array();
function doStorePop()
{
document.getElementById("Save").onclick = function() {
var opts = document.getElementById("box1").getElementsByTagName("option");
var maxOpts = opts.length - 1;
var maxStore = storage.length - 1;
for (i=0;i<=opts.length-1;i++) {
if (maxStore < maxOpts) {
storage.push(opts[i].value);
}
}
}
document.getElementById("Pop").onclick = function() {
document.getElementById("box2").innerHTML="";
for (ii=0;ii<=storage.length-1;ii++) {
var new_opts = document.createElement("option");
document.getElementById("box2").style.textTransform="capitalize";
new_opts.value = storage[ii];
new_opts.innerHTML = storage[ii];
document.getElementById("box2").appendChild(new_opts);
}
storage = [];
}
}
window.onload = function() {
doStorePop();
}
</script>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input id="Save" type="button" value="Save" name="Save">

<br><br>

<input id="Pop" type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>
Last edited by web_loone08 : January 24th, 2013 at 08:58 PM.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Store contents of drop down box into var, then load the new dropdown box from var

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap