2017-05-03 3 views
1

검도 UI 프레임 워크를 사용하여 웹 응용 프로그램을 개발 중입니다. 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> 

'grand_parent'클래스는 조건에 따라 반복됩니다. 이 'child2'클래스는 Kendo 드롭 다운 목록에 바인딩됩니다. I '는 child3'콘텐츠 교체해야 대응하는 자식 2 드롭 다운리스트로부터 값을 선택할 때

$(".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; 
    } 
} 

내 요건이다. (같은 I는 첫 번째 행의 첫 번째 행 child3의 자식 2 드롭 다운리스트로부터 값을 선택할 때 교체되어야한다) . 어떻게해야합니까?

+0

1)? 2)이 과정에서 조작 할 다른 드롭 다운 목록이 있습니까? (위의 질문에서 'child1'과 'child3'요소는 간단한 div입니다.) 3) 스위치 케이스에서 'case1'을 여러 번 작성했습니다. –

+0

@ 지오바니 로미오 : 실수로 일어난 일입니다. 위에서 언급 한 것처럼 child1과 child3는 단순 div입니다. Oncly child2 클래스는 Kendodropdownlists와 바인딩됩니다. –

+0

child3 대신 child1 또는 child2를 선택하면 어떻게됩니까? –

답변

1

코드에서 수정해야 할 것이 거의 없습니다. 먼저 "this.element"또는 "this.wrapper"를 선택해야합니다. 다음 링크를 확인하십시오 : Kendo UI Widgets Overview

그런 다음 스위치 케이스를 수정하십시오. 그리고 마지막으로 당신의 jQuery 셀렉터를 수정 : 여기

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

행동에서 볼 수있는 링크입니다 : 당신이 자식 2 오히려 child3보다를 자식 1 선택하거나 경우에해야 일이 무엇

http://dojo.telerik.com/eyupA

+0

그것은 작동 !!!!!!!! 감사 :) :) :) –

관련 문제