[英]Show/hide div on select
I am trying to show div's depending on which value a select box is on. 我试图显示div取决于选择框处于哪个值。 With my current script it is working, however, when I change the value of the select it shows the next div without hiding the previously selected one. 使用我当前的脚本,它可以正常工作,但是,当我更改select的值时,它将显示下一个div,而不会隐藏先前选择的div。 I only want this JS script to show the currently selected div, not every div that is selected by the select box (ie. switching from one option to another). 我只希望此JS脚本显示当前选定的div,而不是显示由选择框选择的每个div(即从一个选项切换到另一个选项)。
js and html js和html
<script>
$(function() {
$('#contract_bid').hide();
$('#equipment_purchase').hide();
$('#hiring_employees').hide();
$('#marketing').hide();
$('#expansion').hide();
$('#working_capital').hide();
$('#inventory_purchase').hide();
$('#refinancing').hide();
$('#other').hide();
$('#loan_application_requested_purpose').change(function(){
if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
$('#contract_bid').show();
} else if($('#loan_application_requested_purpose').val() == 'Equipment Purchase') {
$('#equipment_purchase').show();
} else if($('#loan_application_requested_purpose').val() == 'Hiring Employees') {
$('#hiring_employees').show();
} else if($('#loan_application_requested_purpose').val() == 'Marketing') {
$('#marketing').show();
} else if($('#loan_application_requested_purpose').val() == 'Expansion/Renovation') {
$('#expansion').show();
} else if($('#loan_application_requested_purpose').val() == 'Working Capital') {
$('#working_capital').show();
} else if($('#loan_application_requested_purpose').val() == 'Inventory Purchase') {
$('#inventory_purchase').show();
} else if($('#loan_application_requested_purpose').val() == 'Refinancing') {
$('#refinancing').show();
} else {
$('#other').show();
}
});
});
</script>
# HTML
<div id="contract_bid"></div>
<div id="equipment_purchase"></div>
<div id="hiring_employees"></div>
<div id="marketing"></div>
<div id="expansion"></div>
<div id="working_capital"></div>
<div id="inventory_purchase"></div>
<div id="refinancing"></div>
<div id="other"></div>
Like this 像这样
$(function() {
$('#loan_application_requested_purpose').on("change",function(){
$(".loan_purpose").hide();
// change all spaces to underscore and grab the first part of Expansion/
var $div = $("#"+$(this).val().toLowerCase().replace(/ /g,"_").split("/")[0]);
if ($div.length>0) $div.show();
else $("#other").show();
}).change(); // run change on load to show relevant already selected
});
Alternative to giving a class: if your divs have a common parent, you can do 替代授课:如果您的div有一个共同的父母,则可以
$("#parentID > div").hide();
instead of 代替
$(".loan_purpose").hide();
Alternative solution: 替代解决方案:
If you can change the values to reflect the IDs of the divs to show then the script will be much shorter: 如果您可以更改值以反映要显示的div的ID,则脚本将短得多:
<select id="loan_application_requested_purpose">
<option value="other">Please select</option>
<option value="equipment_purchase">Equipment Purchase</option>
.
.
<option value="expansion">Expansion/Renovation</option>
</select>
Then my script needs only 然后我的脚本只需要
$(function() {
$('#loan_application_requested_purpose').on("change",function(){
$(".loan_purpose").hide();
$("#"+$(this).val()).show();
}).change(); // run change on load to show relevant already selected
});
First of all add common class to all your divs: 首先,将通用类添加到所有div中:
<div id="other" class="section"></div>
<div id="contract_bid" class="section"></div>
<!-- and so on ... -->
Then it will allow you to reduce your code: 然后,它将允许您减少代码:
$(function () {
$('.section').hide();
$('#loan_application_requested_purpose').change(function () {
$('.section').hide();
var val = $(this).val();
if (val == 'Contract Bid') {
$('#contract_bid').show();
} else if (val == 'Equipment Purchase') {
$('#equipment_purchase').show();
}
// other checks ....
else {
$('#other').show();
}
});
});
Note that it's cleaner to calculate value only once with var val = $(this).val();
请注意,使用var val = $(this).val();
只计算一次值更干净var val = $(this).val();
and use it later. 稍后再使用。
And finally even better would be to use CSS to initially hide sections (and get rid of the first $('.section').hide();
): 最后甚至更好的方法是使用CSS最初隐藏部分(并摆脱第一个$('.section').hide();
):
.section {
display: none;
}
<div id="#myDivs">
<div id="contract_bid"></div>
<div id="equipment_purchase"></div>
<div id="hiring_employees"></div>
<div id="marketing"></div>
<div id="expansion"></div>
<div id="working_capital"></div>
<div id="inventory_purchase"></div>
<div id="refinancing"></div>
<div id="other"></div>
</div>
if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
$("#myDivs div").hide()
$('#contract_bid').show();
}else
{
...
you can hide the visible div before you display the hidden div: 您可以在显示隐藏的div之前隐藏可见的div:
$(function() {
$('#contract_bid').hide();
$('#equipment_purchase').hide();
$('#hiring_employees').hide();
$('#marketing').hide();
$('#expansion').hide();
$('#working_capital').hide();
$('#inventory_purchase').hide();
$('#refinancing').hide();
$('#other').hide();
$('#loan_application_requested_purpose').change(function(){
// here comes the change:
$('.loan_application_purpose:visible').hide();
if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
$('#contract_bid').show();
} else if($('#loan_application_requested_purpose').val() == 'Equipment Purchase') {
$('#equipment_purchase').show();
} else if($('#loan_application_requested_purpose').val() == 'Hiring Employees') {
$('#hiring_employees').show();
} else if($('#loan_application_requested_purpose').val() == 'Marketing') {
$('#marketing').show();
} else if($('#loan_application_requested_purpose').val() == 'Expansion/Renovation') {
$('#expansion').show();
} else if($('#loan_application_requested_purpose').val() == 'Working Capital') {
$('#working_capital').show();
} else if($('#loan_application_requested_purpose').val() == 'Inventory Purchase') {
$('#inventory_purchase').show();
} else if($('#loan_application_requested_purpose').val() == 'Refinancing') {
$('#refinancing').show();
} else {
$('#other').show();
}
});
});
HTML: HTML:
<div id="contract_bid" class="loan_application_purpose"></div>
<div id="equipment_purchase" class="loan_application_purpose"></div>
<div id="hiring_employees" class="loan_application_purpose"></div>
<div id="marketing" class="loan_application_purpose"></div>
<div id="expansion" class="loan_application_purpose"></div>
<div id="working_capital" class="loan_application_purpose"></div>
<div id="inventory_purchase" class="loan_application_purpose"></div>
<div id="refinancing" class="loan_application_purpose"></div>
<div id="other" class="loan_application_purpose"></div>
Always hide all then show selected: 始终隐藏所有内容,然后显示所选内容:
$( '#trigger' ).change( function() { var selected_id = '#' + $('#trigger').val(); // Grab the ID to show $( '.foo' ).hide(); // Hide all $( selected_id ).show(); // Show selected } ).change(); // Run at least once
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="trigger"> <option>d1</option> <option>d2</option> </select> <div id="d1" class="foo">D1</div> <div id="d2" class="foo">D2</div>
Here, you have to hide other div
in if or elseif condition like in if 在这里,您必须在if或elseif条件下隐藏其他div
,例如if
if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
$('#contract_bid').show();
$('#equipment_purchase').hide();
$('#hiring_employees').hide();
$('#marketing').hide();
$('#expansion').hide();
$('#working_capital').hide();
$('#inventory_purchase').hide();
$('#refinancing').hide();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.