Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Create a dropdown using values from an array

Posted on 2007-11-13
6
Medium Priority
?
1,408 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 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

715 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