[英]jQuery show/hide a div based on select value
I have a select list with values 'all' and 'custom'. 我有一个选择列表,其值为'all'和'custom'。 On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.
在选择值为'custom'时,应显示带有“资源”类的div,如果值为“all”,则应隐藏该值。
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: 这个javascript是这样的:
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: 你需要使用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();
}
})
You will want to add the event handler: 您将要添加事件处理程序:
$("#privileges").change(craateUserJsObject.ShowPrivileges);
Then, within your ShowPrivileges funciton: 然后,在你的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
}
});
or 要么
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}
You are making this too complicated: 你这太复杂了:
First off, drop the inline onclick
. 首先,放下内联
onclick
。 Since you are using jQuery, attach your handler dynamically. 由于您使用的是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>
Secondly, don't listen for the click and then attach the change
handler. 其次,不要监听点击,然后附加
change
处理程序。 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. 您可以通过删除onClick并从选项中删除ID来清理HTML。
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>
And your JavaScript could simply do this: 你的JavaScript可以简单地这样做:
$('#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 : 如果要在页面加载中切换显示,可以触发相同的
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.