0
我張貼了關於如何切換multiple hidden fields to appear via CSS & Javascript如何根據多個下拉選項顯示多個隱藏字段？
我可以使用下拉選項中的一個來實現它，在這種情況下一天「科」。
我想在同一個應用程序中能夠選擇「分支」，「區域」和「分區」，並有我選擇的相應隱藏字段出現。這裏是的jsfiddle，不知道爲什麼，我不能讓他們顯示：https://jsfiddle.net/4vup4dq8/
任何幫助將是巨大的:)（這是最好的社會，大家都幫了我這麼多的！）
$("select[name='YourLocation']").on("change", function() {
console.log($(this).val())
if ($(this).val() == 'Branch') {
$('.RN').show();
$('.BN').show();
$('.DN').show();
} else {
$('.RN').hide();
$('.BN').hide();
$('.DN').hide();
}
});
$("select[name='YourLocation']").on("change", function() {
console.log($(this).val())
if ($(this).val() == 'Region') {
$('.RN').show();
$('.DN').show();
} else {
$('.RN').hide();
$('.DN').hide();
}
});
$("select[name='YourLocation']").on("change", function() {
console.log($(this).val())
if ($(this).val() == 'Division') {
$('.DN').show();
} else {
$('.DN').hide();
}
});
$("select[name='YourLocation']").on("change", function() {
console.log($(this).val())
if ($(this).val() == 'Customer Care Center') {
$('.CCC').show();
} else {
$('.CCC').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>Your Location</label>
<select name="YourLocation" class="form-control select2" style="width: 100%;" required>
<option value="" disabled selected>Select Your Location</option>
<option value="Branch">Branch</option>
<option value="Region">Region</option>
<option value="Division">Division</option>
<option value="Customer Care Center">Customer Care Center</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label></label>
<input type="text" class="form-control BN" name="BranchNumber" placeholder="Branch #" id="BranchNum">
</div>
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<input type="text" class="form-control RN" name="RegionNumber" placeholder="Region #" id="RegionNum">
</div>
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<input type="text" class="form-control DN" name="DivisionNumber" placeholder="Division #" id="DivisionNum">
</div>
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" id="CCC" required>
<option value="" disabled selected>Select Your Center</option>
<option value="Dallas">Dallas</option>
<option value="Las Vegas">Las Vegas</option>
<option value="Phoenix">Phoenix</option>
<option value="Tampa">Tampa</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
.BN {
display: none;
}
.RN {
display: none;
}
.DN {
display: none;
}
.CCC {
display: none;
}
你有什麼問題？似乎對我有用？ –
當我選擇「分支」時，我想要顯示「分支＃」，「分割號」和「區域＃」。當我選擇「地區」時，我想要「分區號」和「地區號」，當我選擇「分區」時，我想要顯示「分區號」。但是當我點擊「分支」或「地區」時，只有一個選擇出現。 https://jsfiddle.net/4vup4dq8/ – Helene
您在同一元素上綁定更改事件3次。你需要在一個綁定事件中執行你的邏輯。 –