jQuery-nice-select插件无法正常工作 [英] Jquery-nice-select plugin not working properly
问题描述
我正在使用Jquery-nice-select插件.( http://hernansartorio.com/jquery -nice-select/).
I am using Jquery-nice-select plugin.(http://hernansartorio.com/jquery-nice-select/).
我有两个选择下拉菜单.在第一个中，我将显示国家名称表单数据库，在第二个下拉列表中，将根据国家名称显示状态名称.
I have two select dropdowns. In the first one, I am displaying the country name form database and In second dropdown I am displaying the state name depending upon the country name.
我能够同时显示两者，但问题是，当我选择国家/地区名称时，会显示州名，但在选择下拉列表中却没有显示.即使我无法选择它.请检查下图. 你能帮我这个忙吗?
I am able to display the both but the issue is, When I am selecting the country name then state name is displaying but that are not displaying inside select drop down. even I am not able to select it. Please check the below image. Would you help me out in this?
之前
选择国家/地区名称后
<?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元素.
The plugin works this way: It takes the select element and manipulate the DOM by hiding the select element and adding a styled DIV element that has a better UI but still behaves as a SELECT element.
第一次调用该插件会起作用，但是在更新状态元素之后-您需要告诉插件有新数据.
The first time you call the plugin, it has its effect but after updating the state's element - you need to tell the plugin that there's new data.
因此，首先，我们要更新状态的SELECT元素. 之后，我们要告诉插件我们已经更新了select元素，以便它将更新DIV.
So, first, we would like to update the SELECT element of the states. Afterwards we want the tell the plugin that we've updated that select element so it would update the 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);
}
这篇关于jQuery-nice-select插件无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
