Bootstrap-Select isn´t changing

im using http://silviomoreto.github.io/bootstrap-select/examples/ for my custom select boxes. The content is been loaded with JQuery. If I change the select boxes, the button with its content isn´t updated. I tried $('select').selectpicker(); to manage this problem, but it doesn´t work. Do u have a solution for me?

$('select#item').on("change", function ()
    {
        var intID = parseInt($('select#item').val());

        if (intID > 0)
        {
            $.post(_this.strAjaxUrl, {
                'action': 'getAction',
                'intID': intID
            }, function (strResponse)
            {
                var jsonDaten = $.parseJSON(strResponse);
                if (jsonDaten.strStatus == "OK")
                {
                    $('select#item2').html(jsonDaten.strHtml);
                    $('select#item2').selectpicker();
                }
            });
        }
    });

Solution

You are binding the change event to the select tag. Actually what happens after you apply the plugin to your select tag is, The select tag will be hidden and replaced by 'div' element with ul and li tags. After this your select tag is not on the UI anymore, Its Hidden. So your change event will never hit (because you are not playing with the select tag anymore). If you look at the plugin documentation you will find that there is a event called changed.bs.select. Take a look here.

So you must actually use the event provided by the plugin to trigger the change event. So use something like

$('select#item').on('changed.bs.select', function (e) {
  // get new data to the select Tag.
});

The tricky part here is, you can update the select tag, But remember this select tag is hidden. So you might not see changes on the UI.

So the solution is Destroy the plugin when you want to update the select tag with new data, use $('select#item').selectpicker('destroy'); apply the new html. And then re apply the plugin. Also remember you must re apply the $('select#item').on('changed.bs.select', function (e) { event binding also.

Let me know if this helps.