• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1417
  • Last Modified:

Create a dropdown using values from an array

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
Wirwar
Asked:
Wirwar
  • 4
1 Solution
 
nschaferCommented:
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
 
ZvonkoSystems architectCommented:
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
 
nschaferCommented:
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

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

Neal.
0
 
WirwarAuthor Commented:
Thank you very much for sharing your knowledge!
0
 
nschaferCommented:
Glad I could help,
Neal.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now