根据代码点火器中的条件下拉

Question

我需要根据条件显示一个下拉列表。

以下是视图页面中的下拉列表。其中列出了从property table获取的属性名称，其中具有type status字段，其中其值为sale或lease。

如果属性类型状态为"销售"，则必须显示一个下拉列表，其中包含"available"和"sold"选项。如果是lease那么occupied和vacancy.

property name和type status插入property form中。 条件将应用于unit form。给出property name下拉列表的位置。基于此，它必须显示另一个带有sold and available或occupied and vacant的下拉列表。

我希望我的问题很清楚。我试图解释它。请帮助我做到这一点。提前致谢

<div class="form-group col-md-6">
<label class="control-label">Property Name<span class="manda">*</span> </label>
<select class="form-control" name="pId" id="property">
<option value="0">Choose....</option>

<?php
if ( $property ) {

foreach ( $property as $row ) {

echo "<option value='" . $row->pId . "'>" . $row->name . "</option>";
}

} ?>
</select>
<span class="error invalid-feedback"></span>
</div>

当我从上面的下拉列表中选择一个选项时，说属性名称，就会发生更改事件。

<script type="text/javascript">
$( "document" ).ready( function () {
$( "#property" ).change( function () {
var property_id = $( this ).val();
$.ajax( {
url: '<?php echo base_url( 'admin/Unit/get_type_status' )?>',
type: 'POST',
data: { property_id: property_id },
dataType: 'json',
success: function ( response ) {
console.log( response );
if ( response == "Sale" ) {
$( "#sale" ).show();
} else {
$( "#lease" ).show();
}
}
} );
} );
} );
</script>

它获取需要检查的值的位置。console.log(response);给了{type_status: "Sale"}.所以我需要检查if(response == "Sale")我不知道应该如何检查它。如果是这样，则显示以下代码。

<div class="form-group col-md-6">
<label class="control-label">Property Status<span class="manda">*</span> </label>
<div id="sale">
<select class="form-control" name="typeStatus" id="typeStatus">
<option value="0">Choose....</option>
<option value="Available">Available</option>
<option value="Sold">Sold</option>
</select>
</div>
</div>

否则需要显示以下代码

<div class="form-group col-md-6">
<label class="control-label">Property Status<span class="manda">*</span> </label>
<div id="lease">
<select class="form-control" name="typeStatus" id="typeStatus">
<option value="0">Choose....</option>
<option value="Occupied">Occupied</option>
<option value="Vacancy">Vacancy</option>
</select>
</div>
</div>

这不起作用，我不知道如何根据条件显示下拉列表。

Answer 1

响应是一个对象，而不是一个字符串。您必须访问属性type_status才能检查值。

将脚本更改为以下内容

<script type="text/javascript">
$( "document" ).ready( function () {

const sale = $( "#sale" );
const lease = $( "#lease" );

// hide both elements at start
sale.hide();
lease.hide();

$( "#property" ).change( function () {
const property_id = $( this ).val();
$.ajax( {
url: '<?php echo base_url( 'admin/Unit/get_type_status' )?>',
type: 'POST',
data: { property_id: property_id },
dataType: 'json',
success: function ( response ) {
console.log( response );

// check the property 'type_status'
if ( response.type_status == "Sale" ) { 
lease.hide();
sale.show();
} else {
sale.hide();
lease.show();
}
}
} );
} );
} );
</script>

并使用此 HTML

<div class="form-group col-md-6">
<label class="control-label">Property Status<span class="manda">*</span> </label>
<div id="sale">
<select class="form-control" name="typeStatus" id="typeStatus">
<option value="0">Choose....</option>
<option value="Available">Available</option>
<option value="Sold">Sold</option>
</select>
</div>
<div id="lease">
<select class="form-control" name="typeStatus" id="typeStatus">
<option value="0">Choose....</option>
<option value="Occupied">Occupied</option>
<option value="Vacancy">Vacancy</option>
</select>
</div>
</div>