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="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

[dorayme]

In article
<11**********************@g4g2000hsf.googlegroups. com>,
khinester <no**********@gmail.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**********************@g4g2000hsf.googlegroups. com>,
khinester <no**********@gmail.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**********************@h2g2000hsg.googlegroups. com>,
Norman <no**********@gmail.comwrote:

dorayme wrote:

In article
<11**********************@g4g2000hsf.googlegroups. com>,
khinester <no**********@gmail.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 <[e-mail]:

In article
<[e-mail]. com>,

Norman <[e-mail]:

dorayme wrote:

In article
<[e-mail]. com>,
khinester <[e-mail]:

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*********************@n4g2000hsb.googlegroups.c om>,
Norman <no**********@gmail.comwrote:

On 10 juin, 10:37, dorayme <[e-mail]:

In article
<[e-mail]. com>,

Norman <[e-mail]:

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 <[e-mail]:

In article
<[e-mail].c om>,

Norman <[e-mail]:

On 10 juin, 10:37, dorayme <[e-mail]:

In article
<[e-mail]. com>,

Norman <[e-mail]:
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 <[e-mail]:

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(document.getElementById('og0'));
">

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