javascript - 当选项的值属性更改时检测事件

Question

我正在使用 Syncfusion (grid ejs2) 中的一些组件，并尝试创建级联表单...您知道经典的 1 下拉列表选择填充 2 下拉列表。只是为了澄清，是为从网格组件“添加新”和“编辑”创建的自动表单，因此，不是从头开始创建的表单。

问题是它是如何工作的组件，不完全是一个 html 对象，是一个像这样的奇特的下拉 html 列表，包含所有元素。

并且 select html 元素隐藏如下:(此 select 元素始终只有一个选项)

当选择了精美列表中的选项时，选择的选项值会发生变化，从而更改选项的“值”和“文本”部分，如下所示:

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

我需要检测何时发生此更改以了解此值(进行ajax调用并填充第二个选择)，我尝试使用 $("#GridEmpresaId_hidden").change 但不起作用(因为所选选项不会更改)只是他的值被某些脚本改变了。

有没有办法检测选项的值和文本的变化？？

提前致谢

Answer 1

@BeN 您可以使用单元格编辑模板功能来实现带有网格编辑的级联下拉列表。我们根据您的查询准备了一个简单的示例，其中使用网格列的编辑属性为 ShipCountry 和 ShipState 列呈现级联 DropDownList。请引用下面的代码示例

@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