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

Question

我正在使用 Syncfusion (grid ejs2) 中的一些组件并尝试创建级联形式...您知道经典的 1 下拉列表 select 填充 2 下拉列表。只是为了澄清是从网格组件为 "add new" 和 "edit" 创建的自动表单，因此，不是从头开始创建的表单。

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

而select html元素是这样隐藏的：（这个select元素一直只有一个选项）

当来自花式列表的选项被 selected 时，select 选项值发生变化，像这样改变选项的 "value" 和 "text" 部分：

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

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

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

提前致谢

Answer 1

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

Answer 2

我在另一个帖子上找到了答案，最后是这样的：

$("#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);

                });

感谢@Delaballe 的帮助。

对我有帮助的问题link是这个

Answer 3

@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

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

Detect event when a value property of option is changed

javascript

jquery

syncfusion

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

Detect event when a value property of option is changed

javascript

jquery

syncfusion

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