Select picker is not working with simple html select?

Question

I am using select & selectpicker-plugin for states and places values. State values are loaded properly in select option and on select change select picker value(places) should be displayed. On web pages, place values are not visible and when i check with browser debug Elements, i can see the places values are loaded. What is the cause that its not visible on webpage?

When I remove selectpicker from class,

  <select class="form-control" id="selectplaces">
  </select>

I can see the values are loaded and visible on web page

@Mr. X, how to create live example as I am using MYSQL as database — Jerry Salathia, Jan 03 '18 at 07:58
By simulating your code, go to `jsfiddle.net` add a `select option` with static data, and include those plugin you used by `cdn` and share it here. that's it! — Pedram, Jan 03 '18 at 08:00
Have you ever tried, two selectpicker with dependency of second on first. — Jerry Salathia, Jan 03 '18 at 08:41
Just to help you to use jsfiddle, here is a starting fiddle with bootstrap-selectpicker: https://jsfiddle.net/beaver71/ue44uk9b/ — beaver, Jan 03 '18 at 10:49

score 1 · Answer 1 · answered Jan 03 '18 at 11:17

Probably you didn't use .selectpicker('refresh') method to refresh bootstrap-selectpicker element after loading new values (places).

Here is a snippet with two bootstrap-selectpicker connected together:

$('#selectstates').on('changed.bs.select', function(e) {
  var v = $(e.target).val();
  console.log("selected value:", v);
  switch (v) {
    case "us":
      addOptions('#selectplaces', ['New Jork', 'Chicago']);
      break;
    case "it":
      addOptions('#selectplaces', ['Rome', 'Venice']);
      break;
    case "de":
      addOptions('#selectplaces', ['Berlin', 'Hamburg']);
      break;
    default:
      $('#selectplaces').selectpicker('val', []);
  }
});

function addOptions(id, arr) {
  $(id).empty();
  var opt = $('<option data-hidden="true">select a place...</option>');
  $(id).append(opt);
  for (var i in arr) {
    opt = $("<option/>").val(arr[i]).html(arr[i]);
    $(id).append(opt);
  }
  $(id).selectpicker('refresh');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />

<label>States:</label>
<select class="selectpicker" id="selectstates">
  <option data-hidden="true">select a state...</option>
  <option value="us">USA</option>
  <option value="it">Italy</option>
  <option value="de">Germany</option>
</select>
<br>
<br>
<label>Places:</label>
<select class="selectpicker" id="selectplaces">
</select>

Select picker is not working with simple html select?

1 Answers1