问题描述
我有一个表单,我试图根据用户从下拉菜单中的选择来显示和隐藏不同的输入字段。我让它在选择一个选项时工作,它显示所需的表单,但也隐藏表单周围的所有内容。如果我将它设置为不隐藏任何内容而只显示,它会一个接一个地显示表单。
我想要做的是设置它,以便当用户进行选择时,它显示相关表单而不隐藏任何额外内容,如果用户选择新表单,则显示新表单并隐藏旧表单,所有这些都没有隐藏从一开始就存在的预先存在的元素。
HTML
<section id="quote">
<div id="quote_form" class="container border border-dark" style="border-radius:10px">
<h2 class="text-center">Get a Quote!</h2>
<form class="text-center">
<div>
<select class=" form-control-lg col-md-4 col-md-offset-4" id="building-type">
<option selected disabled hidden>Please select building type</option>
<option value="residential">Residential</option>
<option value="commercial">Commercial</option>
<option value="corporate">Corporate</option>
<option value="hybrid">Hybrid</option>
</select>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="standard" checked>
<label class="form-check-label" for="standard">Standard ($7,565/shaft)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="premium">
<label class="form-check-label" for="premium">Premium ($12,345/shaft)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tier_selection" id="excelium">
<label class="form-check-label" for="excelium">Excelium ($15,400/shaft)</label>
</div>
</form>
<!--RESIDENTIAL INPUTS-->
<form name="residential" id="residential" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="residential_input">
<div id="number-of-apartments" class="form-group form-field residential">
<label for="apartment_number">Number of apartments:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="apartment_number">
</div>
<div id="number-of-floors" class="form-group form-field residential">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field residential">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
</div>
</form>
<!--/RESIDENTIAL INPUTS-->
<!--COMMERCIAL INPUTS-->
<form name="commercial" id="commercial" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="commercial_input">
<div id="number-of-companies" class="form-group form-field commercial">
<label for="business_number">Number of distinct businesses:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
</div>
<div id="number-of-floors" class="form-group form-field commercial">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field commercial">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field commercial">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="number-of-elevators" class="form-group form-field commercial">
<label for="elevator_cages">Number of elevator cages to be deployed:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="elevator_cages">
</div>
</div>
</form>
<!--/COMMERCIAL INPUTS-->
<!--CORPORATE INPUTS-->
<form name="corporate" id="corporate" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="corporate_input">
<div id="number-of-corporations" class="form-group form-field corporate">
<label for="companies">Number of separate tenant companies:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="companies">
</div>
<div id="number-of-floors" class="form-group form-field corporate">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field corporate">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field corporate">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="maximum-occupancy" class="form-group form-field corporate">
<label for="people_floor">Maximum number of people per floor:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
</div>
</div>
</form>
<!--/CORPORATE INPUTS-->
<!--HYBRID INPUTS-->
<form name="hybrid" id="hybrid" class="text-center" style="display:none">
<h4 class="text-center">Please enter the following information:</h4>
<div id="hybrid-input">
<div id="number-of-companies" class="form-group form-field hybrid">
<label for="business_number">Number of distinct businesses:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="business_number">
</div>
<div id="number-of-floors" class="form-group form-field hybrid">
<label for="floor_number">Number of floors:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="floor_number">
</div>
<div id="number-of-basements" class="form-group form-field hybrid">
<label for="basement_number">Number of basements:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="basement_number">
</div>
<div id="number-of-parking-spots" class="form-group form-field hybrid">
<label for="parking_spaces">Number of parking spaces:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="parking_spaces">
</div>
<div id="maximum-occupancy" class="form-group form-field hybrid">
<label for="people_floor">Maximum number of people per floor:</label>
<input type="text" class="col-sm-2 col-md-offset-6" id="people_floor">
</div>
<div id="business-hours" class="form-group form-field hybrid">
<label for="active_hours">Building active hours per day:</label>
<select class="col-sm-2 col-md-offset-6" id="active_hours">
<option selected id="0" value="0">0</option>
<option id="1" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
<option id="5" value="5">5</option>
<option id="6" value="6">6</option>
<option id="7" value="7">7</option>
<option id="8" value="8">8</option>
<option id="9" value="9">9</option>
<option id="10" value="10">10</option>
<option id="11" value="11">11</option>
<option id="12" value="12">12</option>
<option id="13" value="13">13</option>
<option id="14" value="14">14</option>
<option id="15" value="15">15</option>
<option id="16" value="16">16</option>
<option id="17" value="17">17</option>
<option id="18" value="18">18</option>
<option id="19" value="19">19</option>
<option id="20" value="20">20</option>
<option id="21" value="21">21</option>
<option id="22" value="22">22</option>
<option id="23" value="23">23</option>
<option id="24" value="24">24</option>
</select>
</div>
</div>
</form>
<!--/HYBRID INPUTS-->
<!--QUOTE OUTPUTS-->
<div id="quote_output">
<h2 class="text-center">Your instant quote:</h2>
<form class="text-center">
<div id="quote_output_fields">
<div class="form-group">
<label for="elevator_number">Number of elevators:</label>
<input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="elevator_number">
</div>
<div class="form-group">
<label for="quote_total">Installation Quote:</label>
<input type="text" readonly class="col-sm-2 col-md-offset-6 plaintext" id="quote_total">
</div>
</div>
</form>
</div>
<!--/QUOTE OUTPUTS-->
</div>
</section>
隐藏除选择之外的所有内容的jQuery
$("#building-type").on("change",function() {
$("#" + $(this).val()).show().siblings().hide();
})
jQuery 只显示,不隐藏
$("#building-type").on("change",function() {
$("#" + $(this).val()).show();
})
我认为 jQuery 会隐藏旧的选择,我只是不知道用什么来代替“这个”
$("#building-type").on("change",function() {
$("#" + $(this).val()).show();
$("#" + $(this).val()).hide();
})
感谢您的帮助,如果您需要任何其他信息,我会尽快提供。
解决方法
经过更多的环顾和尝试后,我确实找到了一个解决方案,虽然我认为它写得不那么好,但它确实有效。
有效的jQuery
$('#building-type').on('change',function(){
if( $(this).val()==="residential"){
$("#residential").show()
}
else if( $(this).val()==="commercial"){
$("#commercial").show()
}
else if( $(this).val()==="corporate"){
$("#corporate").show()
}
else if( $(this).val()==="hybrid"){
$("#hybrid").show()
}
else{
$("#" + $(this)).hide()
}
});
,
尝试在每个 sub-form
上添加一个 form
类,它应该隐藏/显示...
然后选择上的这个 change
处理程序应该可以工作:
$("#building-type").on("change",function() {
console.log("change",$(this).val())
$(".sub-form").hide()
$("#" + $(this).val()).show();
});