jQuery show/hide div 基于 select 选项
jQuery show/hide div based on select option
所以我知道这个问题已经被问了很多,我循环浏览了几篇文章,似乎完全按照所说的做了,但无法让它发挥作用。可以看到my page here.
基本上我想显示一个 div 并使其成为必需的 inputs/selects(一旦显示;如果隐藏,则不需要)。显然 div 应该 show/hide 取决于选择。
$('#table-meals, .product-addon-please-choose-your-meal').hide();
$('#purchase').change(function(){
if($(this).val()=="Individual") {
$('#table-meals').show();
$('select').prop('required',true);
}
if($(this).val()=="Table of 10") {
$('.product-addon-please-choose-your-meal').show();
$('input').prop('required',true);
}
});
以下代码在您的测试页上对我有用。
您似乎混淆了 10 个元素的 individual/table。
// Using jQuery instead of $ because it looks like there's some sort of conflict on the site
jQuery('#purchase').change(function(){
// Reset required fields and hide fields
jQuery('select, input').prop('required', false);
jQuery('#table-meals, .product-addon-please-choose-your-meal').hide();
if(jQuery(this).val() == "Individual") {
jQuery('.product-addon-please-choose-your-meal').show();
jQuery('input').prop('required', true);
}
if(jQuery(this).val() == "Table of 10") {
jQuery('#table-meals').show();
jQuery('select').prop('required', true);
}
});
基于下拉列表选择
jQuery(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
window.onunload = unloadPage;
function unloadPage(){
$('#dropdown').find('option:first').attr('selected', 'selected');
}
if ($(this).attr("value") == "user") {
$(".box").not(".user").hide();
$(".user").fadeIn(3000);
}
else if ($(this).attr("value") == "group") {
$(".box").not(".group").hide();
$(".group").fadeIn(3000);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-sm-12" >
<select class="selectpicker" id="dropdown">
<option value="default" selected="selected">Select Module..</option>
<option value="group">Group Management</option>
<option value="user">User Management</option>
</select>
</div>
<div class="group box" style="display:none">
<h4>Group Management</h4>
<p>Div 2.</p>
</div>
<div class="user box" style="display:none">
<h4>User Management</h4>
</div>
我想出来了,而不是使用 $('#purchase').change(function(){
我需要使用 $('form').on('change', '#purchase', function(){
所以我知道这个问题已经被问了很多,我循环浏览了几篇文章,似乎完全按照所说的做了,但无法让它发挥作用。可以看到my page here.
基本上我想显示一个 div 并使其成为必需的 inputs/selects(一旦显示;如果隐藏,则不需要)。显然 div 应该 show/hide 取决于选择。
$('#table-meals, .product-addon-please-choose-your-meal').hide();
$('#purchase').change(function(){
if($(this).val()=="Individual") {
$('#table-meals').show();
$('select').prop('required',true);
}
if($(this).val()=="Table of 10") {
$('.product-addon-please-choose-your-meal').show();
$('input').prop('required',true);
}
});
以下代码在您的测试页上对我有用。
您似乎混淆了 10 个元素的 individual/table。
// Using jQuery instead of $ because it looks like there's some sort of conflict on the site
jQuery('#purchase').change(function(){
// Reset required fields and hide fields
jQuery('select, input').prop('required', false);
jQuery('#table-meals, .product-addon-please-choose-your-meal').hide();
if(jQuery(this).val() == "Individual") {
jQuery('.product-addon-please-choose-your-meal').show();
jQuery('input').prop('required', true);
}
if(jQuery(this).val() == "Table of 10") {
jQuery('#table-meals').show();
jQuery('select').prop('required', true);
}
});
基于下拉列表选择
jQuery(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
window.onunload = unloadPage;
function unloadPage(){
$('#dropdown').find('option:first').attr('selected', 'selected');
}
if ($(this).attr("value") == "user") {
$(".box").not(".user").hide();
$(".user").fadeIn(3000);
}
else if ($(this).attr("value") == "group") {
$(".box").not(".group").hide();
$(".group").fadeIn(3000);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-sm-12" >
<select class="selectpicker" id="dropdown">
<option value="default" selected="selected">Select Module..</option>
<option value="group">Group Management</option>
<option value="user">User Management</option>
</select>
</div>
<div class="group box" style="display:none">
<h4>Group Management</h4>
<p>Div 2.</p>
</div>
<div class="user box" style="display:none">
<h4>User Management</h4>
</div>
我想出来了,而不是使用 $('#purchase').change(function(){
我需要使用 $('form').on('change', '#purchase', function(){