Question

我正在使用Syncfusion（grid ejs2）中的某些组件，并试图创建一个层叠形式...您知道经典的1下拉列表选择会填充2下拉列表。为了澄清起见，是为网格组件中的“添加新”和“编辑”创建的自动表单，因此不是从头开始创建的表单。

问题在于它是组件的工作方式，不完全是html对象，而是像这样的带有所有元素的精美下拉html列表。

select html元素被隐藏，如下所示：（此select元素一直只有一个选项）

从花式列表中选择一个选项时，选择选项的值将更改，从而更改该选项的“值”和“文本”部分，如下所示：

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

我需要检测此更改的发生时间，以了解此值（进行ajax调用并填充第二个选择），我尝试使用$（“＃GridEmpresaId_hidden”）。change但不起作用（因为选定的选项未更改）只有他的值被某些脚本改变了。

有没有一种方法可以检测选项的值和文本的变化？

预先感谢

Answer 1

@BeN 您可以使用“单元格编辑模板”功能通过网格编辑来实现Cascading DropDownList。我们根据您的查询准备了一个简单的示例，其中使用Grid列的edit属性为ShipCountry和ShipState列呈现了Cascading 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

Answer 2

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

Answer 3

我在另一个线程上找到了答案，最后像这样工作：

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

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

3 个答案: