Onchange on a select multiple

Question

I have a select and the user can select multiple choice :

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
    <option value="1">name1</option>
    <option value="2">name2</option>
    //...
</select>

Generated with Symfony's form.

I want an event when a user select an option in the select.

So I tried :

<script type="text/javascript">
    $(function () {
        var $zone = $('#mybundle_evenement_name');
        $zone.onclick(function () {
            alert('test');
        });
    });
</script>



<script type="text/javascript">
    var $zone = $('#mybundle_evenement_name');
    $zone.onclick(function () {
        alert('test');
    });
</script>

I also tried with onchange() instead of onclick().

And nothing is happening...

Solution 1

Register event handler in document ready function. It's called after page loads. Also you have error in event handler function name, use it without on: .change(, .click(.

$(document).ready(function() {
    $('#mybundle_evenement_name').change(function() {
        alert('test');
    });
});

Solution 2

Your change event should be wrapped with global function in jquery.

$(function(){
  $('#mybundle_evenement_name').change(function(){
    alert("you selected : "+this.value);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
    <option value="1">name1</option>
    <option value="2">name2</option>
    
</select>

Solution 3

Refer this: https://api.jquery.com/change/

It should be change, instead of onChange. So your code should be:

$(function(){
  $('#mybundle_evenement_name').change(function(){
    alert('test');
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
    <option value="1">name1</option>
    <option value="2">name2</option>
    
</select>

Solution 4

Try giving the select an onchange behaviour in the HTML, like this:

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alertMe()" >
    <option value="1">name1</option>
    <option value="2">name2</option>
    //...
</select>

Then:

<script>
    function alertMe(){
        alert('test');
    }
</script>

Also, make sure you're including jQuery before all your scripts, and don't specify type="text/javascript", as it's not necessary and I'm not entirely sure but it could actually be the source of your problem.

Actually, all that from before could be shortened as:

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alert('test');" >
        <option value="1">name1</option>
        <option value="2">name2</option>
        //...
    </select>

And it works for sure.

View more solutions

Comments

[Ataur Rahman Munna]

And nothing is happening... what do you mean exactly? what problem do you face?

[t-n-y]

how do you load the form ? when you load the page ? where is your js in the page ?

[TechnoCrat]

Can you try writing in .ready() method. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. Probably it might be the issue with registering event. This demo can be useful to resolve your issue jsfiddle.net/m2W2w/743

[adiga]

change it to $zone.on("change", (function () {