Jquery-nice-select 插件无法正常工作答案

【问题标题】：Jquery-nice-select plugin not working properlyJquery-nice-select 插件无法正常工作
【发布时间】：2018-04-14 23:14:07
【问题描述】：

我正在使用 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();
}
}
 ?>

【问题讨论】：

能否请您添加一个我们可以访问的链接或演示？
@OfirBaruch，我应该在哪里添加它？因为数据来自数据库。我只有上面的代码。
Amm... 使用浏览器的检查工具（开发者控制台 -> 元素选项卡）并在为您的问题选择国家后添加下拉列表的输出。
@OfirBaruch，我在网络选项卡->响应中得到了这个输出

标签： javascript php jquery html select

【解决方案1】：

插件是这样工作的：它采用 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);
    }

【讨论】：

是的，它运行良好。非常感谢，我尝试这个问题超过 5 个小时，你在 5 分钟内解决了它。真的很感激。谢谢你。支持我的观点。
感谢分享你的想法

【解决方案2】：

您可以在 jQuery 中附加数据，因为您需要从 process.php 文件传递 json 数组。

var myselect = $('<select>');
$.each(resultData, function(index, key) {
    myselect.append( $('<option></option>').val(key).html(key) );
});
$('.state_get').append(myselect.html());

【讨论】：

它不能直接工作，您需要创建相同格式的响应。

【解决方案3】：

尝试检查状态下拉列表打开时的高度，通过在浏览器上检查它来检查。它的高度是固定的，尝试改变高度。检查 State DropDown 的列表高度，它可能受您使用的另一个 CSS 文件的影响。检查并修复。

【讨论】：

我没有添加任何 CSS，我只使用插件链接。
在浏览器中检查 .list 类的列表高度
我得到了输出链接。我尝试了我知道的任何东西，还有其他帮助吗？
如果您仍然面临同样的问题，请添加 JS Fiddle。