I am using Jquery-nice-select plugin.(/).
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?
Before
After selecting the country name
<?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=".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();
}
}
?>
I am using Jquery-nice-select plugin.(http://hernansartorio./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?
Before
After selecting the country name
<?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./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();
}
}
?>
- Can you please add a link or a demo we could access? – Ofir Baruch Commented Nov 2, 2017 at 12:28
- @OfirBaruch, Where should I add it? Because data is ing from the database. I have only above code. – Naren Verma Commented Nov 2, 2017 at 12:30
- Amm... use your browser's inspect tool (developers console -> elements tab) and add the output of the dropdowns after selecting a country to your question. – Ofir Baruch Commented Nov 2, 2017 at 12:33
- <option value=''>Select state</option><option value=164>Eastern</option><option value=165>Manu'a</option><option value=166>Swains Island</option><option value=167>Western</option> – Naren Verma Commented Nov 2, 2017 at 12:38
- @OfirBaruch, I got this output in the network tab->response – Naren Verma Commented Nov 2, 2017 at 12:39
3 Answers
Reset to default 12The 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.
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);
}
Try to Check the Height of the State DropDown list when it open , check by inspecting it on Browser. Its Height is fixed try to change the Height. Check list height for State DropDown, May it is effected by another CSS files you using . Inspect it and fix.
You can append data in jQuery for that you need to pass json array from process.php file.
var myselect = $('<select>');
$.each(resultData, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.state_get').append(myselect.html());