var dropdown=$('#dropdown');
dropdown.empty();

To remove all options from select, this however does not work ?

You probably need to rebuild the dropdown

I'm having the same issue, can't seem to solve it, I'm trying to empty/remove the options of the dropdown without luck, also using brute way dropdown.html(""); won't work. It happens only when I use this dropdown plugin :( If I use normal bootstrap select class, the empty() method does work.

I'm trying to achieve this by emptying a dropdown options from the "change" method of another dropdown.
I have tried

$('#homeCity').empty();
$('#homeCity option').remove();
$("#homeCity").selectmenu('refresh', true); //guess this is for mobile jquery

my code:

  $('#homeDept').on('change', function(){
      if($(this).val() == null) //this part doesn't matter
      { ciudades.find('option').not(':first').remove();
        ciudades.append($("<option></option>")
              .attr("value",0)
              .text("--"));
      }
      else
      {
        $.post("{!! route('dropdown.citiesCo') !!}", { option: $(this).val() },
          function(data) {
            $('#homeCity').empty();  //this is where it's not working using the dropdownjs 
            $('#homeCity option').remove(); //tried this without luck neither.

            $.each(data, function(key, value) {
             $('#homeCity')
             .append($("<option></option>")
             .attr("value",key)
             .text(value));
           });
          });
      }
  });

my select element:

<select class="form-control select" name="homeCity" id="homeCity" placeholder="--">
</select>

the script

<script>
$.material.init();
    $(document).ready(function() {
    $(".select").dropdown();
     });
</script>

The result is that the items are populated over and over again (listed cities are mixed with the previous selected state/region).

Any help is appreciated. I'm using Laravel 5.1 and Blade.

Ok, we found the problem and my work partner made it to solve it! the issue is caused by the readonly input text inside the div class "dropdownjs" for that dropdown, whenever we do the usual dropdown.empty(), it clears all options from the select element BUT the LI items inside the UL tag are still present.

So since we are populating dynamicly the dropdown anytime the user changes the country or state, my partner did this:

$.get("{!! route('dropdown.citiesCo') !!}",
function(data) {
        var resp="";
        var resp2="";
        $.each(data, function(key, value) {
          resp  += '<option value="'+key+'">'+value+'</option>';
          resp2 += '<li value="'+key+'">'+value+'</li>';
});
        $('#homeCity').html(resp);
        $('#homeCity').siblings(".dropdownjs").find("ul").html(resp2); //this is the key. 
//It replaces all content in the ul tag for that dropdown, with the new data that comes from the Get request.