我试图在这里根据下拉选择显示特定的分区。在我的示例中，我有两个不同的下拉选项，后面跟着两个不同div。我只想根据所选值显示这两个div中的一个，并隐藏其他div。
例如，如果选择了选项1：房屋检查，那么div class＝"房子；应显示。
PHP
<!-- PHP CodeIgniter Render Select Instead of HTML Select-->
<div class="col-md-12" >
<?php
$subject = [0 => ["id" => "House", "name" => _l("House Inspection") ], 1 => ["id" => "Plot", "name" => _l("Plot Inspection") ], "name" => _l("Farm House Inspection") ]];
$value = isset($subject) ? $disscussion->subject : "";
echo render_select("subject", $subject, ["id", "name"], "Inspection Type:", $value);
?>
</div>
<div class="house">
<?php echo render_textarea('house', 'project_discussion_description'); ?>
</div>
<div class="plot">
<?php echo render_textarea('plot', 'project_discussion_description'); ?>
</div>
<script>
jQuery(document).ready(function($){
$('select[name=subject]').change(function () {
// hide all optional elements
$('.house').css('display','none');
$('.plot').css('display','none');
$("select[name=subject] option:selected")
.each(function () {
if($(this).val() == "House" || "Plot") {
$('.subject').css('display','block');
} else if($(this).val() == "House") {
$('.house').css('display','block');
} else if($(this).val() == "Plot") {
$('.plot').css('display','block');
}
});
});
});
</script>
<div class="col-md-12">
<div class="form-group" app-field-wrapper="purpose">
<label for="template" class="control-label">Select Inspection Template</label>
<div class="dropdown bootstrap-select bs3" style="width: 100%;">
<select id="purpose" name="template" class="selectpicker" data-width="100%" data-live-search="true">
<option value="0">Nothing Selected</option>
<option value="1">House</option>
<option value="2">Plot</option>
<option value="3">Farm</option>
</select>
</div>
</div>
</div>
<div style='display:none;' id='house'> Ya </div>
<div style='display:none;' id='plot'> Ho </div>
<div style='display:none;' id='farm'> Ha </div>
JS-
$('#template').on('change', function () {
$("#house").css('display', (this.value == '1') ? 'block' : 'none');
$("#plot").css('display', (this.value == '2') ? 'block' : 'none');
$("#farm").css('display', (this.value == '3') ? 'block' : 'none');
});