Detect event when a value property of option is changed

Question

I am using some components from Syncfusion (grid ejs2) and am trying to create a cascade form... you know the classic 1 dropdown select populate a 2 dropdown. Just for clarify is a automatic form created for "add new" and "edit" from the grid component, so, is not a form created from scratch.

The problem is how it work's the component, is not exactly a html object, is a fancy dropdown html list like this, with all the elements.

And the select html element is hidden like this: (this select element only have one option all the time)

When an option from the fancy list is selected the select option values changes, changing the "value" and "text" part of the option like this:

<option selected value="2">IT</option>

I need to detect when this change occurs for know this values (make an ajax call and populate a second select), I try with $("#GridEmpresaId_hidden").change but not work (because the selected option doesnt change) only his value is changed by some script.

Is there a way to detect the change of value and text of the option ??

Thanks in advance

score 2 · Accepted Answer · answered Jun 20 '18 at 11:05

@BeN You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature. We have prepared a simple sample based on your query in which Cascading DropDownList is rendered for the ShipCountry and ShipState column using edit property of Grid columns. Please refer to the below code example

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
    {
        .  .  .
        col.Field("ShipCountry").HeaderText("ShipCountry").Width("150").Add();
        col.Field("ShipCity").HeaderText("ShipCity").Width("150").Add();

    }).Height("400").Created("created").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

<script>
   .   .   .
    function created(args) {
        this.getColumns()[2].edit = {
            create: function () {
                countryElem = document.createElement('input');
                return countryElem;
            },
            read: function () {
                return countryObj.text;
            },
            destroy: function () {
                countryObj.destroy();
            },
            write: function () {
                countryObj = new ej.dropdowns.DropDownList({
                     .   .   .
                });
                countryObj.appendTo(countryElem);
            }
        };
        this.getColumns()[3].edit = {
            create: function () {
                stateElem = document.createElement('input');
                return stateElem;
            },
            read: function () {
                return stateObj.text;
            },
            destroy: function () {
                stateObj.destroy();
            },
            write: function () {
                stateObj = new ej.dropdowns.DropDownList({
                     .   .   .
               });
                stateObj.appendTo(stateElem);
            }
        }
    }

</script>

documenation

Thanks watching the code I could see that is posible in that way. I will try and let you know. — BeN, Jun 20 '18 at 19:57

score 0 · Answer 2 · answered Jun 19 '18 at 16:28

0

 $(function () {
    $("#GridEmpresaId_hidden").change(function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        console.log("Selected Text: " + selectedText + " Value: " + selectedValue);
    });
});

answered Jun 19 '18 at 16:28

Cyril Gratecos

291
2
6

I already try attaching the change event to the object but is not working... As I write the select element all the time have only one option... So the option is never changed only "the values" of that option are changed. – BeN Jun 19 '18 at 16:34

score 0 · Answer 3 · edited Oct 04 '18 at 12:23

I find the answer on another thread, finally works like this:

$("#GridEmpresaId_hidden").on("DOMSubtreeModified", function (e) {

                    var selectedText = $("#GridEmpresaId_hidden").find("option:selected").text();
                    var selectedValue = $("#GridEmpresaId_hidden").val();
                    console.log("Selected Text: " + selectedText + " Value: " + selectedValue);

                });

Thanks @Delaballe for your help.

The link for the question that help me was this Link

Detect event when a value property of option is changed

3 Answers3