Remove selected attribute if another select is changed, with Bootstrap Select

Question

I want to remove the selected attribute from a select if its sibling select changes its option. With ordinary jQuery, this code is working as usual. See this fiddle: https://jsfiddle.net/hv0x43em/1/

However, I'm also using Bootstrap Select.

With Bootstrap Select, the selected attribute doesn't seem to get removed. Here is my fiddle and code: https://jsfiddle.net/L71xtwx3/2/

$(document).ready(function() {
  $(".charts-city").on('change', function(e) {
    var dataOptions = $(this).closest(".form-group").next().find(".charts-data option");
    $(dataOptions).prop("selected", false);
    e.preventDefault();
  });
});

Any idea how to work on it?

Answer 1

According to your jsfiddle demo code you are taking wrong class charts-provinsi instead of charts-city.

here is the working code

$(document).ready(function() {
    $(".charts-city").on('change', function(e) {
        $(".charts-data").val('0');
        $(".charts-data").selectpicker("refresh");
    });
});

here is the referral link https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

here is the working demo https://jsfiddle.net/L71xtwx3/6/