我有两个选项卡按钮--第一个是租金，第二个是买房. 如果用户点击租金选项卡，则会出现搜索栏.相同的字段可用于两者，但如果单击租金选项卡，则租金选项卡搜索栏处于活动状态，如果单击购买，则显示购买选项卡.
页面加载后的默认状态是购买选项卡处于活动状态，搜索栏，如果我单击购买租金选项卡，则所有数据字段都会根据我的代码提取，但如果我单击租金选项卡，则不会提取数据.
下面是点击购买标签搜索栏数据获取时的屏幕截图
和第二购买标签标签数据获取图像
并查看租金选项卡， Select
且未取二次租金标签数据
here is the chrome debagging tool image if selecting rent
下面是这两个选项卡的html代码
<!-- Home Design -->
<section class="home-one home1-overlay bg-home1">
<div class="container">
<div class="row posr">
<div class="col-lg-12">
<div class="home_content home1 custom_width">
<div class="home-text text-center">
<p class="fz18 color-white">It's great to be Property!</p>
<h2 class="fz50">Find Your Perfect Property</h2>
</div>
<div class="home_tabs">
<ul class="nav justify-content-center nav-tabs" id="myTab2" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="buy-tab" data-toggle="tab" href="#buy" role="tab" aria-controls="buy" aria-selected="true">Buy</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="rent-tab" data-toggle="tab" href="#rent" role="tab" aria-controls="rent" aria-selected="false">Rent</a>
</li>
</ul>
<!-- test -->
<!-- test -->
<div class="tab-content" id="myTabContent2">
<div class="tab-pane fade show active" id="buy" role="tabpanel" aria-labelledby="buy-tab">
<div class="home_adv_srch_opt">
<div class="wrapper">
<div class="home_adv_srch_form">
<form method="POST" action="a_t_listing.php" class="bgc-white p20" id="searchform" name="searchform">
<div class="form-row align-items-center">
<div class="col-auto home_form_input mb15-md">
<div class="form-group style2 mb-2 pl10 pl0-lg">
<label>TYPE</label>
<div class="select-wrap style2-dropdown">
<select class="selectpicker show-tick" name="property_type" id="property_type" >
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
</div>
</div>
</div>
<div class="col-auto home_form_input mb15-md">
<div class="form-group style2 mb-2 pl10 pl0-lg">
<label>LOCATION</label>
<div class="select-wrap style2-dropdown">
<select class="selectpicker" name="Locality" id="Locality" data-live-search="true">
<!-- <option value="">All Cities / Areas</option> -->
<!-- Data Load By Ajax Best Code Attache footer file -->
</select>
</div>
</div>
</div>
<div class="col-auto home_form_input mb15-md" style="">
<div class="form-group style1 mb-2 ml0-767">
<label id="search-lable">SEARCH</label>
<div class="select-wrap style1-dropdown">
<!-- <select name="searchQuery" class="form-control js-searchBox" id="searchQuery">
<option value="">Endorse Property</option>
<option value="TheBliss">The Bliss</option>
<option value="CasaVyoma">Casa Vyoma</option>
<option value="WorldTradeTower">World Trade Tower</option>
<option value="Hotels">View All Results</option>
</select> -->
<input class="form-control" type="text" name="searchQuery" id="searchQuery" placeholder="Enter Locality / Project / Society / Landmark" autocomplete="off">
<div id="suggestionContainer"></div>
</div>
</div>
</div>
<div class="col-auto home_form_adv_srch_form_btn mb20-md">
<div class="adv_srch_btn dropbtn ml0-767" data-toggle="modal" data-target="#staticBackdrop" id="advance_search_mo">
<i class="flaticon-setting-lines mr10 mt10 mt0-md flr-520"></i>
<span id="advance-search">Advanced Search</span>
</div>
</div>
<div class="col-auto home_form_input2" id="home_form_input2">
<input type="hidden" name="tab" id="selectedTab" value="buy">
<button type="submit" class="btn search-btn ml0-767" id="search-btn"><span class="fa fa-search"></span> Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
<div class="home_adv_srch_opt">
<div class="wrapper">
<div class="home_adv_srch_form">
<form method="POST" action="a_t_listing.php" class="bgc-white p20" id="rent-form" name="searchform" >
<div class="form-row align-items-center">
<div class="col-auto home_form_input mb15-md">
<div class="form-group style2 mb-2 pl10 pl0-lg">
<label>TYPE</label>
<div class="select-wrap style2-dropdown">
<select class="selectpicker show-tick" name="property_type" id="property_type" >
<option value="Residentail">Residentail</option>
<option value="Commercial">Commercial</option>
</select>
</div>
</div>
</div>
<div class="col-auto home_form_input mb15-md">
<div class="form-group style2 mb-2 pl10 pl0-lg">
<label>LOCATION</label>
<div class="select-wrap style2-dropdown">
<select class="selectpicker" name="Locality" id="Locality" data-live-search="true">
<option value="">All Cities / Areas</option>
<!-- Data Load By Ajax Best Code Attache footer file -->
</select>
</div>
</div>
</div>
<div class="col-auto home_form_input mb15-md">
<div class="form-group style1 mb-2 ml0-767">
<label>SEARCH</label>
<div class="select-wrap style2-dropdown">
<!-- <select name="lang" class="form-control js-searchBox">
<option value="">Endorse Property</option>
<option value="sankalpgrace2">Sankalp Grace 2</option>
<option value="StratumVenus">Stratum Venus</option>
<option value="Indraparasth6">Indraparasth 6</option>
<option value="Hotels">View All Results</option>
</select> -->
<input class="form-control" type="text" name="searchQuery" id="searchQuery" placeholder="Enter Locality / Project / Society / Landmark" autocomplete="off">
<div id="suggestionContainer"></div>
</div>
</div>
</div>
<div class="col-auto home_form_adv_srch_form_btn mb20-md">
<div class="adv_srch_btn dropbtn ml0-767" data-toggle="modal" data-target="#staticBackdrop">
<i class="flaticon-setting-lines mr10 mt10 mt0-md flr-520"></i>
<span id="advance-search">Advanced Search</span>
</div>
</div>
<div class="col-auto home_form_input2">
<!-- Add a hidden input field to store the selected tab -->
<input type="hidden" name="tab" id="selectedTab" value="rent">
<button type="submit" class="btn search-btn ml0-767"><span class="fa fa-search"></span> Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
下面是这两个选项卡的My javacsript代码
<script>
$(document).ready(function() {
// Load default value on page load
updateDropdowns();
$('#property_type').on('change', function() {
updateDropdowns();
});
$('#myTab2 a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
updateDropdowns();
});
function updateDropdowns() {
var propertyType = $('#property_type').val();
var selectedTab = $('.tab-content .tab-pane.active').attr("id");
// Determine the URL for AJAX request based on selected tab
var ajaxUrl = './conn/are_fetch_data.php';
var ajaxData = { propertyType: propertyType, tab: selectedTab };
if (selectedTab === 'rent') {
// Additional logic if needed for the "rent" tab
// ajaxUrl = ...
// ajaxData = ...
}
// Send AJAX request to fetch location options
$.ajax({
type: 'POST',
url: ajaxUrl,
data: ajaxData,
success: function(data) {
$('#Locality').html(data);
$('#Locality').selectpicker('refresh'); // Reinitialize the second dropdown
},
error: function() {
console.log('Error fetching location options');
}
});
}
});
</script>
我担心的是，如果在买房选项卡中打开代码，代码运行得很好，但为什么它在租金选项卡中不起作用？为什么数据不能读取？开发人员工具中什么也没有发生.
以下是我的代码.fetch_data.php文件和一切正常工作，以及如果 Select 购买选项卡而不是工作租金选项卡，还会获取数据
include 'new_conn.php';
// Retrieve selected property type from AJAX request
$propertyType = $_POST['propertyType'];
// Query the appropriate database table based on property type
if ($propertyType === 'Residential') {
$tableName = 'residential';
$columnName = 'R_Locality';
} else {
$tableName = 'commercial';
$columnName = 'C_Locality';
}
$query = "SELECT DISTINCT $columnName FROM $tableName";
$result = $conn->query($query);
// Build the options for the area/city dropdown
$options = "<option value=''>Select an Area/City</option>";
while ($row = $result->fetch_assoc()) {
$options .= "<option value='" . $row[$columnName] . "'>" . $row[$columnName] . "</option>";
}
echo $options;
$conn->close();