JavaScript — плагин nice-select не работает должным образом
Я использую плагин 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 и манипулирует DOM, скрывая элемент select и добавляя стилизованный элемент DIV, который имеет лучший пользовательский интерфейс, но при этом ведет себя как элемент SELECT.
Когда вы в первый раз вызываете плагин, он действует, но после обновления элемента состояния — вы должны сообщить плагину, что появились новые данные.
Итак, во-первых, мы хотели бы обновить элемент 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);
}
Другие решения
Попробуйте проверить высоту списка DropDown состояния, когда он открывается, проверьте его в браузере. Его высота зафиксирована, попробуйте изменить высоту. Проверьте высоту списка для состояния DropDown, возможно, это происходит с помощью других файлов CSS, которые вы используете. Осмотрите это и исправьте.
Вы можете добавить данные в jQuery, для чего вам нужно передать массив json из файла process.php.
var myselect = $('<select>');
$.each(resultData, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.state_get').append(myselect.html());detector