Jquery-nice-select Plugin Not Working Properly

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

Solution 1:

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.

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);
    }

Solution 2:

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.

Solution 3:

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());