Change event not working in a boostrap multiple select field

Question

My HTML page contains a bootstrap multiple select field:

<select class="form-control bootstrap-select"
    data-style="alpha-grey-300 pt-5 pb-5 pl-10 text-size-mini" multiple
    id="associated.persons"
    data-live-search="true">
</select>

Every time a new set of selection is made, the jQuery change event is not working. When I write this code,

$('#associated.persons').change(function (e) {
        console.log("Input changed !!!!!!!!!!!!!!!");
    });

Nothing is written it the console. I don't know where the problem is exactly.

http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — jrSakizci, Mar 16 '17 at 16:35

score 0 · Accepted Answer · answered Mar 16 '17 at 16:27

You can't used a point in your id or class name. Actually combine hashtag and point in the same rules says your selector search a bloc with id "associated" and class "persons".

Rename your ID and never used the point in your ID or class name. Used - or _ if your want create an ID or class name with multiple words.

You can doing this:

<select class="form-control bootstrap-select"
    data-style="alpha-grey-300 pt-5 pb-5 pl-10 text-size-mini" multiple
    id="associated-persons"
    data-live-search="true">
</select>

And

$('#associated-persons').change(function (e) {
        console.log("Input changed !!!!!!!!!!!!!!!");
});

score 0 · Answer 2 · answered Mar 16 '17 at 16:27

0

id="associated.persons"

Here is the problem. Use another selector and it will work. In your code jquery will try to bind onChange to item with class 'person' and with id="associated"

answered Mar 16 '17 at 16:27

Johan Willfred

811
7
14

Change event not working in a boostrap multiple select field

2 Answers2