Change State With Dropdown

[ShoeLace1291]

So I'm making a member group permissions form.  I have a selection box to set the group's permission level and if "banned" is selected, I want it to hide the permissions checkbox table(contained in a div called "permissions").  In firebug error console, I get a weird error that says "setting a property that has only a getter", which has completely baffled me.  This is the short and sweet code:

 

<option value='4' onclick="document.getElementById('permissions').style = 'display: none;'">Banned</option>

[Psycho]

First, you should not put javascript code directly in an elements event parameter; the event should call a function instead.

 

Specific to your problem though, you should use the onchange event of the select object. The options of a select list do not "officially" have an onclick event. However, each browser manufacturer tweaks the standards to their liking. So what may work in one browser may not work in another. The option objects do have an onchange event, but I would stick to the onchange of the select object.

 

<select name="permission" onchange="hidePermissionTable(this);">
<option value="1">Admin</option>
<option value="2">Moderator</option>
<option value="3">User</option>
<option value="-1">Banned</option>
</select>

 

Then have this function

function hidePermissionTable(this)
{
    var displayVal = (this.options[this.selectedIndex].value==-1) ? 'none' : '';
    document.getElementById('permissions').style.display = displayVal;
    return;
}