Menu
Hi!
I am using a script to change dynamically the values of a second drop-down menu, based on the selected value from a first drop-down menu. For this purpose I use a HTML file with a <select></select> field, which onChange performs an AJAX request to a PHP script, which returns the values for the second Javascript menu. The whole thing is working perfectly in Firefox and Googlechrome, but on IE – NOT. Here goes my code:
[CODE]<html>
<head>
<style type=”text/css”>
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
}
select{
width:150px;
}
</style>
<script type=”text/javascript” src=”ajax.js”></script>
<script type=”text/javascript”>
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com
************************************************************************************************************/
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById(‘dhtmlgoodies_city’).options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = ‘getCities.php?countryCode=’+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById(‘dhtmlgoodies_city’);
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById(‘dhtmlgoodies_subcategory’).options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = ‘getSubCategories.php?category=’+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById(‘dhtmlgoodies_subcategory’);
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action=”” method=”post”>
<table>
<tr>
<td>Country: </td>
<td><select id=”dhtmlgoodies_country” name=”dhtmlgoodies_country” onchange=”getCityList(this)”>
<option value=””>Select a country</option>
<option value=”dk”>Denmark</option>
<option value=”no”>Norway</option>
<option value=”us”>US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id=”dhtmlgoodies_city” name=”dhtmlgoodies_city”>
</select>
</td>
</tr>
<tr>
<td colspan=”2″><b>Second example</b></td>
</tr>
<tr>
<td>Category: </td>
<td><select id=”dhtmlgoodies_category” name=”dhtmlgoodies_category” onchange=”getSubCategoryList(this)”>
<option value=””>Select a category</option>
<option value=”1″>Cars</option>
<option value=”2″>Boats</option>
<option value=”3″>Airplanes</option>
</select>
</td>
</tr>
<tr>
<td>Sub category: </td>
<td><select id=”dhtmlgoodies_subcategory” name=”dhtmlgoodies_subcategory”>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
This is the ajax.js content : [url]http://www.dhtmlgoodies.com/AJAX/ajax.js
This is the PHP script:
[code=php]<?php
if(isset($_GET[‘countryCode’])){
switch($_GET[‘countryCode’]){
case “no”:
echo “obj.options[obj.options.length] = new Option(‘Bergen’,’1′);n”;
echo “obj.options[obj.options.length] = new Option(‘Haugesund’,’2′);n”;
echo “obj.options[obj.options.length] = new Option(‘Oslo’,’3′);n”;
echo “obj.options[obj.options.length] = new Option(‘Stavanger’,’4′);n”;
break;
case “dk”:
echo “obj.options[obj.options.length] = new Option(‘Aalborg’,’11’);n”;
echo “obj.options[obj.options.length] = new Option(‘Copenhagen’,’12’);n”;
echo “obj.options[obj.options.length] = new Option(‘Odense’,’13’);n”;
break;
case “us”:
echo “obj.options[obj.options.length] = new Option(‘Atlanta’,’21’);n”;
echo “obj.options[obj.options.length] = new Option(‘Chicago’,’22’);n”;
echo “obj.options[obj.options.length] = new Option(‘Denver’,’23’);n”;
echo “obj.options[obj.options.length] = new Option(‘Los Angeles’,’24’);n”;
echo “obj.options[obj.options.length] = new Option(‘New York’,’25’);n”;
echo “obj.options[obj.options.length] = new Option(‘San Fransisco’,’26’);n”;
echo “obj.options[obj.options.length] = new Option(‘Seattle’,’27’);n”;
break;
}
}
?>
Do you have any idea how can I get this workng in IE? I have already spent hours reading about it in forums and I still can not find the proper solution. 10x in advance.