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...

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...

• javascript
• jquery
• forms
• symfony

• And nothing is happening... what do you mean exactly? what problem do you face? – Ataur Rahman Munna Commented Sep 6, 2017 at 9:02
• how do you load the form ? when you load the page ? where is your js in the page ? – t-n-y Commented Sep 6, 2017 at 9:02
• 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) bees safe to manipulate. Probably it might be the issue with registering event. This demo can be useful to resolve your issue jsfiddle/m2W2w/743 – TechnoCrat Commented Sep 6, 2017 at 9:03
• change it to $zone.on("change", (function () { – adiga Commented Sep 6, 2017 at 9:08

7 Answers 7

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');
    });
});

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./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>

Refer this: https://api.jquery./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./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>

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.

This is working for me. you can use same.

$("#MultiSelect_DefaultValues").change(function() {
    console.log($(this).val());
    $('#test').html($(this).val());
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<div id="test">
</div>

for ref: https://jsfiddle/s5hoxybz/1/

        $(document).on("change", "#mybundle_evenement_name", function () {
            //...
        });

did the job. Don't know why other solutions didn't work...

$(document).ready(function(){
$("#mybundle_evenement_name").change(function(){
$(this).html(alert('test'+ this.value));
});
});

<script src="https://ajax.googleapis./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>