combine bootstrap-select and jquery chained

Question

I am traying to combine bootstrap-select and jquery chained to filter my select list. her is my code

<select id="mark" name="mark" class="selectpicker" multiple>
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series" class="selectpicker" multiple>
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

When I choose BMW and AUDI. The only series that came up was for BMW. I am expecting BMW and AUDI series. here is jsfield sample https://jsfiddle.net/80zkodod/.

score 1 · Answer 1 · answered Dec 22 '17 at 11:28

/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function (a, b) {
"use strict";
a.fn.chained = function (c) {
    return this.each(function () {
        function d() {
            var d = !0;
            a(e).html(f.html());
            var h = a("option:selected", this).parent().val();
            var arr = h.toString().split(",");
            a("option", e).each(function () {
                            var current_class = a(this).attr("class");
                        if(h != current_class && $.inArray(current_class, arr) < 0){
                        a(this).remove()
                    }
            });

            if (1 === a("option", e).size() && "" === a(e).val()) {
                a(e).prop("disabled", !0)
            } else {
                a(e).prop("disabled", !1)
            }
            d && a(e).trigger("change")

        }
        var e = this, f = a(e).clone();
        a(c).each(function () {
            a(this).bind("change", function () {
                d()
            }), a("option:selected", this).length || a("option", this).first().attr("selected", "selected"), d()
        })
    })
}, a.fn.chainedTo = a.fn.chained, a.fn.chained.defaults = {}
}(window.jQuery || window.Zepto, window, document);

Change your chained.js code to this

Sample Fiddle

https://jsfiddle.net/80zkodod/1/

combine bootstrap-select and jquery chained

1 Answers1