|
|
Posted by khinester on 06/09/07 18:40
Hello,
I have the following template that basically does the following:
User select Country, then a sub-list is generated with Regions and
then this returns the Counties
###############
<tr>
<td colspan="2">
Region<br/>
<select onchange="select_country(this.value)" style="width:
80%">
<option value="none"></option>
<option stl:repeat="country countries" value="country_$
{country/id}"
selected="${country/is_selected}">${country/title}</
option>
</select>
(Country)
<br/>
<select onchange="select_region(this.value)" style="width:
80%">
<option value="none"></option>
<optgroup stl:repeat="country countries" id="country_$
{country/id}"
disabled="disabled" style="display: ${country/display}">
<option stl:repeat="region country/regions"
value="region_${region/id}"
selected="${region/is_selected}">${region/title}</
option>
</optgroup>
</select>
(Region)
<br/>
<select name="abakuc:county" style="width: 80%">
<option value=""></option>
<optgroup stl:repeat="region regions" id="region_${region/
id}"
disabled="disabled" style="display: ${region/display}">
<option stl:repeat="county region/counties" value="$
{county/id}"
selected="${county/is_selected}">${county/title}</
option>
</optgroup>
</select>
(County)
</td>
</tr>
###############
I also have this simple javascript:
###############
function select_country(value) {
/* Hide */
var groups = document.getElementsByTagName('optgroup');
var group;
for (var i=0; i<groups.length; i++) {
group = groups[i];
group.style.display = 'none';
group.disabled = true;
}
/* Show */
var element = document.getElementById(value);
element.style.display = 'inherit';
element.disabled = false;
}
function select_region(value) {
/* Hide */
var groups = document.getElementsByTagName('optgroup');
var group;
for (var i=0; i<groups.length; i++) {
group = groups[i];
if (group.id.substr(0, 7) == "region_") {
group.style.display = 'none';
group.disabled = true;
}
}
/* Show */
var element = document.getElementById(value);
element.style.display = 'inherit';
element.disabled = false;
}
###############
Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.
Searching on Google does reviel that Safari has a BUG with the
display:none
Anyone with a solution on how to best fix this problem.
Many thanks
Norman
Navigation:
[Reply to this message]
|