Solved

Create a dropdown using values from an array

Posted on 2007-11-13
6
1,402 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 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

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…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

810 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