我有一个国家、州和城市链接下拉列表，根据国家加载一个州，根据州加载城市.代码在我的本地服务器上运行得很好，但当推到实时服务器时，下拉菜单无法正常运行，例如，在某些情况下，它对所有3个服务器都可以正常工作，但在某些情况下，它只是不加载任何内容，在控制台中，我看到一个简单的错误，没有其他内容.
以下是JS:
$(document).ready(function() {
var country_id = localStorage.getItem("select2CountryValue");
var state_id = localStorage.getItem("select2StateValue");
var page_load = true; //added this
// Triggering the deleteLocalStorage function in case the client is not
// created and the back button is clicked
$('.del-ls').click(function() {
deleteLocalStorage();
});
// This function is also called by PHP using script tags when the create
// client form is successfully submitted
function deleteLocalStorage() {
var country_id = localStorage.getItem("select2CountryValue");
var state_id = localStorage.getItem("select2StateValue");
localStorage.removeItem('select2CountryValue');
localStorage.removeItem('select2StateValue');
}
//$('.csc-select').select2();
$('#country').select2({
placeholder: 'Select Country'
});
$('#state').select2({
placeholder: 'Select State/Region'
});
$('#city').select2({
placeholder: 'Select City'
});
$('select[name="country"]').on('change',function() {
var country_id= $(this).val();
localStorage.setItem("select2CountryValue", country_id);
if (country_id) {
$.ajax({
url: "/src/Pages/world/getStates.php",
type: "GET",
data: {'country_id':country_id},
dataType: "json",
success: function(data) {
console.log(data);
$('select[name="state"]').empty();
$('select[name="state"]').append('<option value="">Select State</option>');
$.each(JSON.parse(data), function(key,value) {
$('select[name="state"]').append('<option value="'+value.id+'">'+value.name+'</option>');
});
//check if the change is called on page load
if (page_load == true) {
$('#state').val(state_id).trigger('change'); //assign slected value after element option is added in dom
page_load = false; //adding this so that next time this doesn't get execute
}
}
});
} else {
$('select[name="state"]').empty();
}
});
$('#country').val(country_id).trigger('change');
$('select[name="state"]').on('change',function() {
var country_id = $('#country').val();
var state_id = $(this).val();
localStorage.setItem("select2StateValue", state_id);
if (state_id) {
$.ajax({
url: "/src/Pages/world/getCities.php",
type: "GET",
data: {'country_id': country_id, 'state_id': state_id},
dataType: "json",
success: function(data) {
console.log(data);
$('select[name="city"]').empty();
$('select[name="city"]').append('<option value="">Select City</option>');
$.each(JSON.parse(data),function(key,value) {
$('select[name="city"]').append('<option value="'+value.id+'">'+value.name+'</option>');
});
}
});
} else {
$('select[name="city"]').empty();
}
});
});
这是HTML，只是一个简单的PHP，用于加载工作正常的国家:
<p>
<span>Country</span>
<select class="csc-select" name="country" id="country">
<option value="">Select Country</option>
<?php foreach($countries as $country) { ?>
<option value="<?php echo $country[$columnName['COLUMN_NAME']]; ?>"
>
<?php echo $country['name']; ?>
</option>
<?php } ?>
</select>
</p>
<p>
<span>State</span>
<select class="csc-select" name="state" id="state">
<option value="">Select State</option>
</select>
</p>
<p>
<span>City</span>
<select class="csc-select" name="city" id="city">
<option value="">Select City</option>
</select>
</p>
我现在有点不知所措，因为它在本地运行得很好，但是在live server上，它并不适用于您 Select 的每个选项，我重新判断了国家、州和城市数据库，所有信息都在那里，所以它没有丢失，数据库也与我在本地版本中使用的数据库相同.如果有人有任何 idea 或建议，我将不胜感激.
以下是有时出现的控制台日志(log)错误:
> Uncaught SyntaxError: Unexpected end of JSON input
> at JSON.parse (<anonymous>)
> at Object.success (add:977:29)
> at c (jquery-3.6.0.min.js:2:28327)
> at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2:29072)
> at l (jquery-3.6.0.min.js:2:79901)
> at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)
现在我添加了控制台的屏幕截图.log，当我 Select 美国，加利福尼亚州时会发生这种情况，所以它没有显示加利福尼亚州的任何情况，但它应该:
这是美国的 map .php文件代码:
<?php
use App\Session;
use App\Login;
use App\Location;
require_once("../../../vendor/autoload.php");
$objSession = new Session();
if(!$objSession->isLogged()) {
Login::redirectTo("/login");
}
$country_id = $_GET['country_id'];
if(isset($_GET['country_id'])) {
$objLocation = new Location();
echo json_encode($getStates = $objLocation->getStates($country_id));
}
这里是getCities.php文件代码:
<?php
use App\Session;
use App\Login;
use App\Location;
require_once("../../../vendor/autoload.php");
$objSession = new Session();
if(!$objSession->isLogged()) {
Login::redirectTo("/login");
}
$state_id = $_GET['state_id'];
$country_id = $_GET['country_id'];
if(isset($_GET['state_id']) && isset($_GET['country_id'])) {
$objLocation = new Location();
echo json_encode($getCities = $objLocation->getCities($state_id, $country_id));
}
这是Location类中获取数据的代码:
public function getStates(string $id): ?string
{
$sql = "SELECT `id`, `name` FROM {$this->table_3}
WHERE `country_id` = '". $this->escape($id) ."'
ORDER BY `name` ASC";
$result = $this->fetchAll($sql);
return json_encode($result);
}
public function getCities(string $state, string $country): bool|string
{
$sql = "SELECT `id`, `name` FROM {$this->table_4}
WHERE `state_id` = '". $this->escape($state) ."'
AND `country_id` = '". $this->escape($country) ."'
ORDER BY `name` ASC";
$result = $this->fetchAll($sql);
return json_encode($result);
}