jQuery show/hide a div based on select value
You can clean up the HTML by dropping the onClick and removing the IDs from the options.
HTML:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option value="all">All</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And your JavaScript could simply do this:
$('#privileges').on('change', function() {
if($(this).val() === 'all') {
$('.resources').hide();
} else {
$('.resources').show();
}
});
You need to use val method:
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'custom') {
$('.resources').show();
}
else $('.resources').hide(); // hide div if value is not "custom"
});
http://jsfiddle.net/RWUdb/