PDA

View Full Version : Populating Dropdown


Shaolins-Finest
02-02-2008, 12:26 AM
Hi Guys,

I have a drop down menu which onload want to populate, and once populated, when the user selects an option it will update several text fields. This is what I have done so far:

HTML:
<select id="menu" name="menu">
<option value="">-Select-</option>
</select>

JAVASCRIPT:
function GetDropList () {
//Create request
var xhr = CreateRequest();

//Add query
xhr.open("GET","requestList.php?action=getlist",true);

xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
var createNewElement = document.createElement('option');
}
}
xhr.send(null);
}

window.onload = function() {
GetDroplist();
}

PHP:
[PHP]
<?php
include("../../db_connect.php");

switch ($_GET['action']) {
case getlist:
$result = mysql_query('SELECT * FROM event') or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
echo $row['eventName'];
break;
}
}
?>
[PHP]

As you can see I am currently trying to workout how I am going to populate the list. Once that is done then I intend to update specific textfields on user selection. I have no idea how to do that (on the js side) because my php script will output several variables.

peep210
02-06-2008, 06:03 PM
http://w3schools.com/htmldom/met_select_add.asp
See if that helps
if you need more help just ask

diades
02-20-2008, 02:43 PM
Hi

I don't know if you have sused this or not but from what I have read there seems to be a simpler route to initially load the data:
init_select.php
$result = mysql_query('SELECT * FROM event') or die(mysql_error());
$optArr = ' var optArr = [';
while ($row = mysql_fetch_assoc($result))
{
$optArr .= $row['eventName'].', ';
}
$optArr .= '];'."\n";


<script type="text/javascript">
//<![CDATA[
function init()
{
<? include init_select.php; ?>
for(var i = 0; i < optArr.length;i++)
{
var opt = document.createElement('option');
document.getElementById("menu").options.add(opt,0);
with(opt)
{
value = optArr[i];
}
var temp = document.createTextNode(optArr[i]);
opt.appendChild(temp);
}
}
window.onload = function() {
//]]>
</script>
Obviously untested but it may give you the idea. :)