Safari display:none in a list

[khinester]

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="selec t_country(this. value)" style="width:
80%">
<option value="none"></option>
<option stl:repeat="cou ntry countries" value="country_ $
{country/id}"
selected="${cou ntry/is_selected}">$ {country/title}</
option>
</select>
(Country)
<br/>
<select onchange="selec t_region(this.v alue)" style="width:
80%">
<option value="none"></option>
<optgroup stl:repeat="cou ntry countries" id="country_$
{country/id}"
disabled="disab led" style="display: ${country/display}">
<option stl:repeat="reg ion country/regions"
value="region_$ {region/id}"
selected="${reg ion/is_selected}">$ {region/title}</
option>
</optgroup>
</select>
(Region)
<br/>
<select name="abakuc:co unty" style="width: 80%">
<option value=""></option>
<optgroup stl:repeat="reg ion regions" id="region_${re gion/
id}"
disabled="disab led" style="display: ${region/display}">
<option stl:repeat="cou nty region/counties" value="$
{county/id}"
selected="${cou nty/is_selected}">$ {county/title}</
option>
</optgroup>
</select>
(County)
</td>
</tr>
###############

I also have this simple javascript:

###############

function select_country( value) {
/* Hide */
var groups = document.getEle mentsByTagName( 'optgroup');
var group;
for (var i=0; i<groups.length ; i++) {
group = groups[i];
group.style.dis play = 'none';
group.disabled = true;
}

/* Show */
var element = document.getEle mentById(value) ;
element.style.d isplay = 'inherit';
element.disable d = false;
}

function select_region(v alue) {
/* Hide */
var groups = document.getEle mentsByTagName( 'optgroup');
var group;
for (var i=0; i<groups.length ; i++) {
group = groups[i];
if (group.id.subst r(0, 7) == "region_") {
group.style.dis play = 'none';
group.disabled = true;
}
}

/* Show */
var element = document.getEle mentById(value) ;
element.style.d isplay = 'inherit';
element.disable d = 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

[dorayme]

In article
<11************ **********@g4g2 000hsf.googlegr oups.com>,
khinester <no**********@g mail.comwrote:

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

.....

>
Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.

Supply a URL so we can see.

--
dorayme

[Norman]

dorayme wrote:

In article
<11************ **********@g4g2 000hsf.googlegr oups.com>,
khinester <no**********@g mail.comwrote:

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

....

Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.

Supply a URL so we can see.

--
dorayme

Hi here is the form

http://uktravellist.info/information/data/address.html

If you select United Kingdom for example, on FF only lists the regions
for the UK, but on Safari it lists all the regions for all the
Countries that have regions. currently only France, UK and USA.

Cheers

Norman

[dorayme]

In article
<11************ **********@h2g2 000hsg.googlegr oups.com>,
Norman <no**********@g mail.comwrote:

dorayme wrote:

In article
<11************ **********@g4g2 000hsf.googlegr oups.com>,
khinester <no**********@g mail.comwrote:

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

....

>
Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.

Supply a URL so we can see.

--
dorayme

Hi here is the form

http://uktravellist.info/information/data/address.html

If you select United Kingdom for example, on FF only lists the regions
for the UK, but on Safari it lists all the regions for all the
Countries that have regions. currently only France, UK and USA.

Right. Well, the first thing to realise is that Safari has,
usefully in a way, poor error correction. iCab is stupidly happy
in its "face" (never mind this if you are not a Mac person) but
equally not doing what you would want.

And, looking closer at FF, it also plays up on repeated attempts.

I suggest you fix up the 556 failed validation errors that are on
that page. Fix up as many as you can and come back.

The css sheet cannot be found and that is a bit of a puzzle in
itself. You have a base url in your html, is it right?

--
dorayme

[Norman]

On 10 juin, 10:37, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1181463247.757 589.140...@h2g2 000hsg.googlegr oups.com>,

Norman <norman.kh...@g mail.comwrote:

dorayme wrote:

In article
<1181414405.309 919.197...@g4g2 000hsf.googlegr oups.com>,
khinester <norman.kh...@g mail.comwrote:

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
....

Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.

Supply a URL so we can see.

--
dorayme

Hi here is the form

http://uktravellist.info/information/data/address.html

If you select United Kingdom for example, on FF only lists the regions
for the UK, but on Safari it lists all the regions for all the
Countries that have regions. currently only France, UK and USA.

Right. Well, the first thing to realise is that Safari has,
usefully in a way, poor error correction. iCab is stupidly happy
in its "face" (never mind this if you are not a Mac person) but
equally not doing what you would want.

And, looking closer at FF, it also plays up on repeated attempts.

I suggest you fix up the 556 failed validation errors that are on
that page. Fix up as many as you can and come back.

The css sheet cannot be found and that is a bit of a puzzle in
itself. You have a base url in your html, is it right?

--
dorayme

Hi dorayme,
The problem is that the actual code for this is on my local machine, I
just am using this web space to show the form and how it handles with
with different browsers.

Anyhow, I have uploaded the css as well.

Cheers
Norman

[dorayme]

In article
<11************ *********@n4g20 00hsb.googlegro ups.com>,
Norman <no**********@g mail.comwrote:

On 10 juin, 10:37, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1181463247.757 589.140...@h2g2 000hsg.googlegr oups.com>,

Norman <norman.kh...@g mail.comwrote:

dorayme wrote:
>http://uktravellist.info/information/data/address.html

If you select United Kingdom for example, on FF only lists the regions
for the UK, but on Safari it lists all the regions for all the
Countries that have regions. currently only France, UK and USA.

Right. Well, the first thing to realise is that Safari has,
usefully in a way, poor error correction. iCab is stupidly happy
in its "face" (never mind this if you are not a Mac person) but
equally not doing what you would want.

And, looking closer at FF, it also plays up on repeated attempts.

I suggest you fix up the 556 failed validation errors that are on
that page. Fix up as many as you can and come back.

The css sheet cannot be found and that is a bit of a puzzle in
itself. You have a base url in your html, is it right?

--
dorayme

Hi dorayme,
The problem is that the actual code for this is on my local machine, I
just am using this web space to show the form and how it handles with
with different browsers.

Anyhow, I have uploaded the css as well.

But the errors are still there, there are 553 today. Anyway, I
will mention that in my FF (latest) when picking UK, it lists
regions of France. But then so does Turkmenistan and others.
Basically, it does not work, nothing particularly to do with
Safari. Follow the suggestion to fix up all errors.

Actually it is not clear what the whole context is? If it is
going to give you a big headache maybe do it simpler. Have at
least the regions and counties text boxes filled in by the user,
and perhaps use more general names for the categories. We don't
have counties here in Australia, there are states, cities, towns,
suburbs. Why not leave all at one simple box, "Full postal
address" and be done?

--
dorayme

[Norman]

On Jun 11, 1:12 am, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1181486713.568 996.38...@n4g20 00hsb.googlegro ups.com>,

Norman <norman.kh...@g mail.comwrote:

On 10 juin, 10:37, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1181463247.757 589.140...@h2g2 000hsg.googlegr oups.com>,

Norman <norman.kh...@g mail.comwrote:
dorayme wrote:
http://uktravellist.info/information/data/address.html

If you select United Kingdom for example, on FF only lists the regions
for the UK, but on Safari it lists all the regions for all the
Countries that have regions. currently only France, UK and USA.

Right. Well, the first thing to realise is that Safari has,
usefully in a way, poor error correction. iCab is stupidly happy
in its "face" (never mind this if you are not a Mac person) but
equally not doing what you would want.

And, looking closer at FF, it also plays up on repeated attempts.

I suggest you fix up the 556 failed validation errors that are on
that page. Fix up as many as you can and come back.

The css sheet cannot be found and that is a bit of a puzzle in
itself. You have a base url in your html, is it right?

--
dorayme

Hi dorayme,
The problem is that the actual code for this is on my local machine, I
just am using this web space to show the form and how it handles with
with different browsers.

Anyhow, I have uploaded the css as well.

But the errors are still there, there are 553 today. Anyway, I
will mention that in my FF (latest) when picking UK, it lists
regions of France. But then so does Turkmenistan and others.
Basically, it does not work, nothing particularly to do with
Safari. Follow the suggestion to fix up all errors.

Actually it is not clear what the whole context is? If it is
going to give you a big headache maybe do it simpler. Have at
least the regions and counties text boxes filled in by the user,
and perhaps use more general names for the categories. We don't
have counties here in Australia, there are states, cities, towns,
suburbs. Why not leave all at one simple box, "Full postal
address" and be done?

--
dorayme

OK thanks for the suggestions, I will try to fix the errors.
Cheers
Norman

[RobG]

On Jun 10, 4:40 am, khinester <norman.kh...@g mail.comwrote:

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

[...HTML with select and optgroup elements ...]

>
Now everything works great on Firefox, not yet tested on IE, but I am
suppriesed that it does not work on Safari.

Not for me. In Firefox, select an item in an optgroup, then hide the
optgroup and the selected option is still selected and visible. I
don't think you should try to limit the availability of options by
using the stlye.display attribute.

Searching on Google does reviel that Safari has a BUG with the
display:none

Testing shows that Safari doesn't hide optgroups using style.display.

Anyone with a solution on how to best fix this problem.

Instead of hiding the elements, move them to a hidden option element
or remove them from the DOM completely:

<select id="sel0">
<optgroup id="og0" label="set 0">
<option>opt0-0
<option>opt0-1
<option>opt0-2
</optgroup>
<optgroup id="og1" label="set 1">
<option>opt1-0
<option>opt1-1
<option>opt1-2
</optgroup>
</select>

<select id="sel1" style="display: none;">
</select>
<input type="button" value="Show/hide group 0" onclick="
toggleEl(docume nt.getElementBy Id('og0'));
">

<script type="text/javascript">
function toggleEl(el){
var pID = el.parentNode.i d;
if (pID == 'sel0') {
document.getEle mentById('sel1' ).appendChild(e l);
} else {
document.getEle mentById('sel0' ).appendChild(e l);
}
}
</script>
Note that an empty select element will cause an HTML validation error.
--
Rob