jQuery 根据选择值显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15645652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show/hide a div based on select value
提问by Du?an
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.
我有一个值为“all”和“custom”的选择列表。在选择值为 'custom' 时，应出现一个类为 'resources' 的 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.
这应该如何工作？对不起，我知道这应该很简单，但我对这一切都很陌生。
回答by dfsq
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"
});
回答by Pavlo Shandro
Privileges.on('change',function(){
if($(this).val()=='custom'){
$('.resources').show();
}else{
$('.resources').hide();
}
})
回答by TNCodeMonkey
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
回答by sasi
$("#privileges").change(function(){
var select= $(this).val();
if(select=='custom'){
//some code
}
});
or
或者
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}
回答by Steve
You are making this too complicated:
你让这太复杂了：
First off, drop the inline onclick. Since you are using jQuery, attach your handler dynamically.
首先，删除 inline 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>
Secondly, don't listen for the click and then attach the changehandler. Attach it directly
其次，不要听点击然后附加change处理程序。直接贴上
<script>
jQuery('#privileges').on('change',function(){
if(jQuery(this).val()=='custom'){
jQuery('.resources').show();
} else {
jQuery('.resources').hide();
}
});
</script>
回答by c0deNinja
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();
}
});
回答by Zakaria Acharki
That could be done with `toggle()` as a shorthand :
这可以用 `toggle()` 作为速记来完成：
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
If you want to toggle the display in the page loadyou 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>