Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Create a dropdown using values from an array

Posted on 2007-11-13
6
Medium Priority
?
1,413 Views
Last Modified: 2008-02-01
Hi, the below (working) sample code creates a dropdown based on two different arrays. In the real situation however, these array's are much longer and then its hard to see what value belongs to what displayed option.  I would like to have the option value and the displayed option be placed together.

There is one condition: the options (array) for the dropdown box will be stored in an external file which can be maintained by users. So it must be simple.... Not like:
  myArray[0][1]=["blabla","blabla"]
  myArray[0][2]=["blabla","blabla"]
but like
{array stuff} [
"blabla","blabla"
"blabla","blabla"
]
I thought to find examples all over the internet, but not!  
Could you please help? Thanks!


<html>
<head>
<script>
var arrayFRUIT = new Array (
"",
"banana",
"apple",
"cherry"
)
var arrayCOLOR= new Array (
"Select color...",
"yellow",
"green",
"red"
)

// This should be something like:
// ("banana","yellow")
// ("apple","green")
// ("cherry","red")

function Result() {
  document.getElementById('result').value = document.getElementById('menu').options[document.getElementById('menu').selectedIndex].value
}
</script>
</head>
<body>
<select id="menu" onchange="Result()">
  <script type="text/javascript">
    for(var item = 0; item < arrayFRUIT.length ; item++){
    document.write("<option value=\"" +arrayFRUIT[item] +"\">" +arrayCOLOR[item] +"</option>");
    }
  </script>
</select>
<input type="text" size="20" id="result" value="">
</body>
</html>
0
Comment
Question by:Wirwar
  • 4
6 Comments
 
LVL 19

Expert Comment

by:nschafer
ID: 20276610
Here's a one solution:  The will use input just like you are asking for, but it could cause a problem if the second value is not entered
----------------------------------------------------------------------
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
var arrayFruit = new Array(
"bananna","yellow",
"apple","green",
"cherry","red"
);

function setFruit() {
  var sel = document.getElementById("menu");
  sel.options.lenth = 0; // clear all options
  for (i=0;i<arrayFruit.length/2;i++) {
    sel.options[i] = new Option(arrayFruit[2*i],arrayFruit[(2*i) + 1]);
  }
}
 
</script>
</head>
<body onload="setFruit();">
<select id="menu" onchange="alert(this.value);">
</select>
</body>
</html>
----------------------------------------------------------------------

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20276626
Check this:




<html>
<head>
<script>
var arrOpt = [
["","Select color..."],
["banana","yellow"],
["apple","green"],
["cherry","red"]
];

window.onload = function(){
  var opt = document.forms[0].menu.options;
  for(var i=0;i<arrOpt.length;i++){
    opt[i] = new Option(arrOpt[i][1],arrOpt[i][0]);
  }
}
function Result(theSel){
  var theForm = theSel.form;
  theForm.result.value = theSel.value;
}
</script>
</head>
<body>
<form>
<select id="menu" name="menu" onchange="Result(this)">
</select>
<input type="text" size="20" id="result" name="result" value="">
</form>
</body>
</html>




0
 
LVL 19

Accepted Solution

by:
nschafer earned 300 total points
ID: 20276657
Another option would be possibly easier to input, but again, invalid user input could cause problems

The idea here is that we will split the string on the = sign, whatever is to the left is displayed, whatever is to the right is the value.  If the = sign is not present the option will have an blank value.  In the previous solution if the color were left out for one of the options then the whole select could be skewed and start showing the values instead of the display.  The = sign could be any character that you don't think will actually be used in the real data, but I think the = sign would be obvious to your users.

Hope this helps,
Neal.

----------------------------------------------------------------------
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
var arrayFruit = new Array(
"bananna=yellow",
"apple=green",
"cherry=red"
);

function setFruit() {
  var sel = document.getElementById("menu");
  sel.options.lenth = 0; // clear all options
  for (i=0;i<arrayFruit.length;i++) {
    sel.options[i] = new Option(arrayFruit[i].split("=")[0],arrayFruit[i].split("=")[1]);
  }
}
 
</script>
</head>
<body onload="setFruit();">
<select id="menu" onchange="alert(this.value);">
</select>
</body>
</html>
----------------------------------------------------------------------
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:nschafer
ID: 20276663
Note when I said "in the previous solution" I meant "in My previous solution".  I was not commenting on Zvonko's code.

Neal.
0
 

Author Comment

by:Wirwar
ID: 20278434
Thank you very much for sharing your knowledge!
0
 
LVL 19

Expert Comment

by:nschafer
ID: 20279469
Glad I could help,
Neal.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question