Can't select an item from a dropdown bootstrap multiple select on Android native browser?

2.6k Views Asked by At

I have some issues trying to select an option from a bootstrap multiple selectpicker -> http://silviomoreto.github.io/bootstrap-select/.

enter image description here

When I click e.g. on "Ketchup", like in the example, on the Android 4.1.2 native browser (not Chrome but the actually browser pre-installed with the system) the item is only focused like in the example and not actually selected (I know it because the item is bound to an Ajax request which stores the selections on a database and if I reload the page, the dropdown is created with the reselected options). Anyway, it should be:

enter image description here

Like in this screenshot took from Chrome. Now here is the code I use:

JS (jQuery):

$('.selectpicker').selectpicker({});
$('body').on('change','.autoupdate',function() {
        var data =  $(this).attr('name') + '=' + encodeURIComponentQuote($(this).val());
        $.ajax({
            url: "script.php?action=update",
            type: "POST",
            data: data,
            cache: false,
            success: function(json) {
                if (json.err!=""){
                }
            }
        });

        return false;
    });

HTML:

<select class="selectpicker autoupdate" name="multisel" multiple data-selected-text-format="count > 3">
    <?php fillSelect($data, $selectedIds); // $data and $selectedIds recovered from DB and echoed using a PHP function ?>
</select>

My problem is that it doesn't work on Android's native browser. I guess the problem is pure client related because on Chrome it works beautifully.

Is there something I need to know about Android's native browser apart that it is not the Android's default browser anymore from the 4.4 version? (Anyway, I still need this feature work for backward compatibility).

How can I make it work?

1

There are 1 best solutions below

0
On

I modified the plugin around line 1359, on the clickListener handler by making the following correction:

  that.$element.trigger("change");

  //that.$element
  //  .triggerNative('change');

I hope this helps.