Question

我正在使用Kendo UI框架开发Web应用程序。 HTML文件如下： -

<div class="grand_parent">

    <div class="parent1"> 
        <div class="child1"></div>
    </div>

    <div class="spacer"></div>

    <div class="parent2">
        <div class="child2"></div>
    </div>

    <div class="spacer"></div>

    <div class="parent3">
        <div class="child3">
             <span>This content will be replaced</span>
        </div>
    </div>

</div>

＆＃39; grand_parent＆＃39;课程将根据条件重复。在这个孩子2＆＃39;课程将与Kendo下拉列表绑定。

$(".child2").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: options,
    change: onSelect,
    index: 0,
});


options = [
    {text:"Child1", value:1},
    {text:"Child2", value:2},
    {text:"Child3", value:3},
];

function onSelect(e){
    var value = e.sender.value();
    switch (value) {
        case 1:
            $(this).parentsUntil(".parent2").closest(".parent3").find(".child3").html("<span>Value1</span>");
            break;
        case 2:
            $(this).parentsUntil(".parent2").closest(".parent3").find(".child3").html("<span>Value2</span>");
            break;
        case 3:
            $(this).parentsUntil(".parent2").closest(".parent3").find(".child3").html("<span>Value3</span>");
            break;
        default:
            $(this).parentsUntil(".parent2").closest(".parent3").find(".child3").html("<span>value restored</span>");
            break;
    }
}

我的要求是当我从child2下拉列表中选择一个相应的＆＃39; child3＆＃39;应该替换内容。（就像我从第一行中的child2下拉列表中选择一个值时，应该替换第一行中的child3）。我怎么能这样做？

Answer 1

您的代码中必须修复的内容很少。首先，您应该选择“this.element”或“this.wrapper”。检查此链接： Kendo UI Widgets Overview

之后修复您的开关案例。最后修复你的jQuery选择器：

$(this.element).closest(".parent2").siblings(".parent3").find(".child3").html("<span>Value1</span>");

这是一个链接，可以看到它的实际效果：

http://dojo.telerik.com/eyupA

从Kendo下拉列表值中选择后代

1 个答案: