I have a select list with values 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.
Form is:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And javascript for this is:
ShowPrivileges: function() {
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
if (select === 'custom') {
$('.resources').show();
}
});
}
How should this look in order to work? Sorry, I know this should be simple, but I am new with all this.
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"
});
Privileges.on('change',function(){
if($(this).val()=='custom'){
$('.resources').show();
}else{
$('.resources').hide();
}
})
You will want to add the event handler:
$("#privileges").change(craateUserJsObject.ShowPrivileges);
Then, within your ShowPrivileges funciton:
var val = $("#privileges").val();
if(val == "whatever")
//do something
else
//do something
$("#privileges").change(function(){
var select= $(this).val();
if(select=='custom'){
//some code
}
});
or
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}
You are making this too complicated:
First off, drop the inline onclick
. Since you are using jQuery, attach your handler dynamically.
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
Secondly, don't listen for the click and then attach the change
handler. Attach it directly
<script>
jQuery('#privileges').on('change',function(){
if(jQuery(this).val()=='custom'){
jQuery('.resources').show();
} else {
jQuery('.resources').hide();
}
});
</script>
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();
}
});
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
If you want to toggle the display in the page load you could trigger the same change()
event, like :
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
}).change();
$('#privileges').change(function() { $('.resources').toggle($(this).val() == 'custom'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label>Privileges:</label> <select name="privileges" id="privileges"> <option id="all" value="all">All</option> <option id="custom" value="custom">Custom</option> </select> </div> <div class="resources" style=" display: none;">resources</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.