...

View Full Version : for loop to null <options>



dhackmann
02-02-2004, 12:22 AM
Hi,

I am trying to make two select boxes 'country', and 'area', the contents of which are php generated. I would like the 'area' select field to only show the areas present in the selected country. I am using the following function, which runs onChange of the 'country' select field, to try to null the fields in the 'area' drop down that do not correspond to the chosen country. Php, of course, gives me all of the areas in my database, but I would like to limit them based on the selection of country. When the function runs I get the following error:

"document.info.area.options[...].id is null or not an object."

Also two of the correct options will be gone.

I think I am not using the for loop properly. Any suggestions would be greatly appreciated.


function limitOptions() {
var dropDown = document.info.country.options[document.info.country.selectedIndex].value
for (var i = 1; i <= document.info.area.options.length; i++){
if (document.info.area.options[i].id !== dropDown){
document.info.area.options[i] = null
}
}

}

glenngv
02-02-2004, 04:01 AM
Do you really want the id or the value?

if (document.info.area.options[i].value != dropDown){

dhackmann
02-02-2004, 04:50 AM
I am looking for the id in the area submit field, the value is what I will submit with the form.

glenngv
02-02-2004, 05:13 AM
Option tags don't have id attribute. Can you post the whole codes or the link to it?

dhackmann
02-03-2004, 12:06 AM
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE = "JavaScript">
<!--
function limitOptions() {
var dropDown = document.info.country.options[document.info.country.selectedIndex].value
for (var i = 1; i <= document.info.area.options.length; i++){
if (document.info.area.options[i].id !== dropDown){
document.info.area.options[i] = null
}
}
}
//-->
</SCRIPT>
</head>

<body>
<form name= "info">
<select name="country" id="country" onChange ="limitOptions()" >
<option value = 0>--select--</option>

<?php
$dbcnx = @mysql_connect ('localhost','','');
if (!$dbcnx) {
die('<p> Unable to connect to the database server at this time.</p>');
}
$dbbooks = @mysql_select_db ('books');
if (!dbbooks) {
die ('<p> The books database is inaccessible at this time.</p>');
}
$result = @mysql_query ('SELECT ID, Name FROM country');
while ($land = mysql_fetch_array($result)) {
$cid = $land ['ID'];
$countries = $land ['Name'];
echo ("<option value = '$cid'>$countries</option>\n");
}
?>
</select>

<select name="area" id="area">
<option value="0" id="0">--select--</option>
<?php
$result2 = @mysql_query ('SELECT ID, Name, CID FROM area');
while ($city = mysql_fetch_array($result2)) {
$aid = $city ['ID'];
$cities = $city ['Name'];
$countId = $city ['CID'];
echo ("<option value = '$aid' id = '$countId'>$cities</option>\n");
}
?>

</select>
<input type ="submit" value="submit">
</form>
</body>
</html>

here it is. I always thought that options had an id attribute, but I could be mistaken. The reason I think they do is because the code almost works, I am just getting snagged somewhere. Thanks for the help in advance.

Dan

glenngv
02-03-2004, 02:47 AM
Just put both id and cid in the value attribute separated by something (like |)

<select name="country" id="country" onChange ="limitOptions(this)" >
...
</select>

<select name="area" id="area">
...
echo ("<option value = '$aid|$countId'>$cities</option>\n");

Then the js code:



function limitOptions(selCountry) {
var arr, rIndex=1;
var dropDown = selCountry.options[selCountry.selectedIndex].value;
var selArea = selCountry.form.area;
var selLen = selArea.options.length;
for (var i = 1; i < selLen; i++){
arr = selArea.options[rIndex].value.split("|");
if (arr[1] != dropDown){
selArea.options[rIndex] = null;
}
else rIndex++; //running index
}
}


Take note that when an option is set to null, all options below it go up so each option index goes down one notch. Thus the running index, rIndex. It increments only when an option contains the id. If not, the option is deleted and the running index should stay the same for the next iteration since the item below the deleted option takes over its index position.

Hope that makes sense. :)

dhackmann
02-04-2004, 12:03 AM
Thanks Glenn, I will give this a try and let you know how it turns out.

dhackmann
02-04-2004, 03:25 AM
Thanks again, the running index solved my problem. For future reference, the option tag "id" attribute does seem to work.

glenngv
02-04-2004, 06:41 AM
User-defined attributes may only work on some browsers.

Happy to help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum