Solved

Create a dropdown using values from an array

Posted on 2007-11-13
6
1,407 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 100 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
Industry Leaders: 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
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

627 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