|
|
Posted by RobG on 06/12/07 12:29
On Jun 10, 4:40 am, khinester <norman.kh...@gmail.com> wrote:
> 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
Navigation:
[Reply to this message]
|