Question

I think this will be a really easy one for anyone that is decent with jQuery, but I’ve got dynamically generated dropdownlists on my page, and I’ve set up a click event on the class, which, as expected fires a click event for all of them. The ID of the select is dynamically generated, so I can’t use that as the selector. I just want to fire the event for the select that is actually changed.

I need to use the id of the selected value in the function – anyone know how this is done?

Code I have so far:

$(document).ready(function () {
    $(".boxItem").change(function () {
        var str = $(this).attr('id');
        var num = $(this).val();
        alert(num);
        var url = "/Search/GetBoxChangeInfo";
        var vmData = { json : @Html.Raw(Json.Encode(Model)),
                        id : str,
                        boxNo : num };
        $.post(url, vmData, function (data) {
            $("#column-1").html(data);
        });
    });
});

Many thanks

Answer 1

$(".boxItem").on("change", function () {

    // to get the value and id of selected option
    var str = $('option:selected', this).attr('id');
    var value = $('option:selected', this).attr('value');

    // or to get value and id of select box use
    var str = this.id; 
    var value = this.value;
    ......
});

If you select is live i.e created after DOM ready then you should try

 $("body").on("change", ".boxItem", function () {

    // to get the value and id of selected option
    var str = $('option:selected', this).attr('id');
    var value = $('option:selected', this).attr('value');

    // or to get value and id of select box use
    var str = this.id; 
    var value = this.value;
    ......
});