CODEWITHSUNDEEP
jqueryselectappend
Rıfat Erdem Sahin
Rıfat Erdem Sahin

Reputation: 1778

How to catch the event change of <select> of multiple when options added dynamically with jQuery?

i need to catch the change event of a select after i add an option. As i do not want dublicate values to be entered from various controls on the page. I tried various ways to catch the event after my option is added on to the page.

update : i want the change event to be fired after i add the option.(Not with the click to the select itself)

What i tried is below.

<script src="/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#clickMe").click(function () {
                $('#example').append('<option value="foo">Foo</option>');
            });

            $("#example").find("option").change(function () {
                alert("changed1");
            });

            $("#example").on("change", function () {
                alert('changed2');
            });

            $("#example option").on("change", function () {
                alert('changed3');
            });

            $("#example").change(function () {
                alert('changed4');
            });
        });
    </script>
</head>
<body>
    <select id="example" multiple="multiple">
    </select>
    <button id="clickMe">
        Add an Option
    </button>
</body>

Upvotes: 0

Views: 5902

Answers (2)

Cris
Cris

Reputation: 13351

$(document).ready(function () {
            $("#clickMe").click(function () {
                $('#example').append('<option value="foo">Foo</option>');
 $('#example').trigger('change');
            });    

$('#example').on('change', function() {
          //alert
        });
   });

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68443

try using trigger method for the same http://api.jquery.com/trigger/

check this also

jquery trigger - 'change' function

@Edit try this code change

$("#clickMe").click(function () {
    $('#example').append('<option value="foo">Foo</option>');
    $('#example').trigger("change");
});

Upvotes: 2

Related Questions