我正在使用 Jquery-nice-select 插件。( http://hernansartorio.com/jquery-nice-select/)。
我有两个选择下拉菜单。在第一个中，我显示国家名称表单数据库，在第二个下拉列表中，我根据国家名称显示州名称。
我可以同时显示两者，但问题是，当我选择国家/地区名称时，会显示州名称，但不会显示在选择下拉列表中。即使我无法选择它。请检查下图。 你能帮我解决这个问题吗？
之前
选择国名后
<?php
include('connection.php');
$country_list="SELECT id,name FROM countries";
/* create a prepared statement */
if ($stmt = $conn->prepare($country_list)) {
/* execute statement */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($id, $country_name);
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/nice-select.css">
</head>
<body>
<!--country name-->
<select name="country_data" class="myselect form-control country_data">
<option value="" disabled selected>Select your country</option>
<?php
while ($stmt->fetch()) {?>
<option value="<?php echo $id;?>"><?php echo $country_name;?></option>
<?php }?>
</select>
<!--state name-->
<select name="state" class="myselect form-control state_get">
<option value=''>Select state</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.nice-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').niceSelect();
});
$(document).ready(function() {
$(".country_data").on('change',function(){
var country_id=$(this).val();
$.ajax({
url:"process.php?key=state_retrive",
method:"POST",
data:'id='+country_id,
success:function(data){
$('.state_get').html(data);
//alert(data);
}
});
});
});
</script>
</body>
</html>
Process.php
<?php
ob_start();
session_start();
include('connection.php');
switch($_GET['key']) {
case 'state_retrive':state_retrive($conn);break;
default : redirect('index.php');
}
function state_retrive($conn)
{
if (isset($_POST['id'])) {
$country_id=$conn->real_escape_string(trim($_POST['id']));
$state_data="SELECT name,id FROM `states` WHERE country_id=?";
//echo $state_data;
if ($stmt = $conn->prepare($state_data)) {
/* bind parameters for markers */
$stmt->bind_param("s", $country_id);
/* execute query */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($state_name, $id);
/* fetch value */
echo $states="<option value=''>Select state</option>";
while ($stmt->fetch()) {
$states="<option value=".$id.">".$state_name."</option>";
echo $states;
}
/* close statement */
$stmt->close();
}
$conn->close();
}
}
?>
最佳答案
插件是这样工作的: 它获取 select 元素并通过隐藏 select 元素并添加样式化的 DIV 元素来操纵 DOM，该元素具有更好的 UI 但仍表现为 SELECT 元素。
第一次调用插件时，它会产生影响，但在更新状态元素后 - 您需要告诉插件有新数据。
因此，首先，我们要更新状态的 SELECT 元素。 之后，我们希望告诉插件我们已经更新了该选择元素，以便它更新 DIV。
success:function(data){
$('select.state_get').html(data); //Make sure you update the SELECT element. not the DIV (by adding "select.xxx").
$('select.state_get').niceSelect('update'); //Tell the plugin to recreate the DIV.
//alert(data);
}
关于javascript - Jquery-nice-select 插件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47075145/