Question

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

Answer 1

插件以这种方式工作：它接受select元素并通过隐藏select元素并添加一个样式化的DIV元素来操作DOM，该元素具有更好的UI但仍然表现为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);
    }

Answer 2

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

Answer 3

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

＆＃13;

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

＆＃13;

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

3 个答案: