Solved

Populating select box from radio button using database data

Posted on 2006-06-18
6
572 Views
Last Modified: 2009-07-29
Hi all,

I've got no problem in how to populate a select box by clicking on a radio button if the javascript array is preprogrammed i.e. the data is already there but my problem is this :

A teaching website. The user selects one of 4 levels (radio buttons) and the select box is populated with the lessons from that level. The option value must contain the id as value and the name of the lesson as the display. The query would be

e.g. select lid,namej from mainlessons where level=1

I'm assuming I have to set 4 arrays using javascript and PHP...any ideas on this one??

Kate
0
Comment
Question by:katneej
  • 2
6 Comments
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 250 total points
ID: 16931422


Here is an example with two arrays:

You set up the arrays first, just put PHP varibles where my literals are:

<script>
var optionSet1 = new Array();
optionSet1[0] = createOption("text1", "value1");
optionSet1[1] = createOption("text2", "value2");
optionSet1[2] = createOption("text3", "value3");

var optionSet2 = new Array();
optionSet2[0] = createOption("textA", "valueA");
optionSet2[1] = createOption("textB", "valueB");
optionSet2[2] = createOption("textC", "valueC");



function setOptions(theSelect, optionArray) {
  resetOptions(theSelect);
      for(var i=0; i<optionArray.length; i++) {
        try { theSelect.add(optionArray[i], null); }
    catch(ex) { theSelect.add(optionArray[i]); }
      }
}


function createOption(text, value) {
  var new_option = document.createElement("option");
  new_option.text = text;
      new_option.value = value;
      return new_option;
}

function resetOptions(theSelect) {
  while(theSelect.options.length != 0) {
    theSelect.remove(0);
  }
}

</script>
</head>

<body>
<input type="radio" onclick="setOptions(document.getElementById('select1'), optionSet1)" value="test1">test1<br>
<input type="radio" onclick="setOptions(document.getElementById('select1'), optionSet2)" value="test2">test2<br>
<select id="select1"><option>Default 1</option><option>Default 2</option></select>
</body>
0
 

Author Comment

by:katneej
ID: 16931551
That seems to be moving in the right direction but the trouble is that I need to populate the arrays from a mysql database using the query i provided..
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16931646


I think you need to ask that question in he PHP forum... or wait around for PHP person here....
0
 
LVL 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 250 total points
ID: 16933641
Here is link to AJAX Based solution to populate select /combobox  (fetching data from databases)

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21871187.html

If you like to follow this approach, I can help you further.

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
key press alert 2 32
Html form and modal / img src -problem 3 31
xjs: how to get sum of value in for loop 2 19
asp Google Map 2 33
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

830 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