[英]jQuery show/hide a div based on select value
我有一個選擇列表,其值為'all'和'custom'。 在選擇值為'custom'時,應顯示帶有“資源”類的div,如果值為“all”,則應隱藏該值。
表格是:
<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>
這個javascript是這樣的:
ShowPrivileges: function() {
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
if (select === 'custom') {
$('.resources').show();
}
});
}
為了工作,這應該怎么樣? 對不起,我知道這應該很簡單,但我是新手。
你需要使用val方法:
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();
}
})
您將要添加事件處理程序:
$("#privileges").change(craateUserJsObject.ShowPrivileges);
然后,在你的ShowPrivileges功能中:
var val = $("#privileges").val();
if(val == "whatever")
//do something
else
//do something
$("#privileges").change(function(){
var select= $(this).val();
if(select=='custom'){
//some code
}
});
要么
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}
你這太復雜了:
首先,放下內聯onclick
。 由於您使用的是jQuery,因此請動態附加處理程序。
<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>
其次,不要監聽點擊,然后附加change
處理程序。 直接附上它
<script>
jQuery('#privileges').on('change',function(){
if(jQuery(this).val()=='custom'){
jQuery('.resources').show();
} else {
jQuery('.resources').hide();
}
});
</script>
您可以通過刪除onClick並從選項中刪除ID來清理HTML。
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>
你的JavaScript可以簡單地這樣做:
$('#privileges').on('change', function() {
if($(this).val() === 'all') {
$('.resources').hide();
} else {
$('.resources').show();
}
});
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
如果要在頁面加載中切換顯示,可以觸發相同的change()
事件,如:
$('#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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.