dijit.form.Select 다시 채워지지 않았습니까?

Question

이것은 내가 어제 데리고 있었던 문제의 연속이다. 만일 그것이 친숙 해지면 thats 이유 :) 그것은 다른 질문 tho 다!

그래서 저는 처음에 dijit.form.Select 페이지를 만들었습니다.

<c:set var="clazzId" value="${verification.clazz.id}" /> 
<div id="clazzOptions"> 
    <select id="clazz" name="clazz" style="width:22em" dojoType="dijit.form.Select" maxHeight="140"> 
     <option value="-1" label="      " /> 
     <c:forEach items="${requestScope.clazzes}" var="clazzItem"> 
      <c:choose> 
       <c:when test="${clazzId eq clazzItem.id}"> 
        <option value="${clazzItem.id}" selected = "true">${clazzItem.name}</option> 
       </c:when> 
       <c:otherwise> 
        <option value="${clazzItem.id}">${clazzItem.name}</option> 
       </c:otherwise> 
      </c:choose> 
     </c:forEach> 
    </select> 
</div> 

그때 내가 아래 다른 드롭 (여기에서 볼 수없는)에서 선택한 값에 따라 사업부 "clazzOptions"의 내용을 교환하는 데 사용하기 위해 노력하고있어 일부 자바 스크립트가

. 그것의 특정 가치가있는 경우에, 다른 어떤 가치든지, 원본 메시지로 div를 교환하십시오 원래 dijit.form.Select를 다시 보여주십시오;

<script type="text/javascript"> 
    var classDropDown; 
    var classPhDMessage = "PhD's do not require a Class or Grade"; 

    dojo.addOnLoad(function() { 
     classDropDown = dojo.byId('clazzOptions').innerHTML; 
    }); 

    function checkForPHD() { 
     var awardOption = dijit.byId('qualification').attr('displayedValue'); 

     if(awardOption == "PhD"){ 
      dojo.byId('clazzOptions').innerHTML = classPhDMessage; 
     } else { 
      dojo.byId('clazzOptions').innerHTML = classDropDown; 
     } 
    } 
</script> 

당신은 내가 페이지가로드 한 후가 (보이지 않는) 아래 다른 드롭에서 선택한 값에 따라 때 그대로 innerHTMLof에게 미리 정의 메시지 간의 변화를 사업부를 캡처하기 위해 노력하고있어 볼 수 있듯이 및 캡처 된 div 내용

문제는 원래 div 내용이 메시지로 대체 된 후 "PhD"에서 다시 선택 항목이 변경되고 원래 div innerHTML이 div에 다시 배치되면 dijit.form.Select - 나타나지만 완전히 비어 있고 사실 전혀 사용할 수없는 것으로 보입니까? dijit.form.Select dojoType을 제거하고 정상적인 선택으로 남겨두면이 전체 작업이 완벽하게 작동하지만 dijit.form.Select가 필요합니다.

dijit.form을 선택하지 않는 이유는 무엇입니까?이 경우 정상 선택과 달리 작업을 선택 하시겠습니까?

Answer 1

dijits를 추가/제거하는 데 특히 innerHTML을 사용하면 안됩니다. 특히 재사용하려는 경우 유용합니다.

dijit은 HTML과 자바 스크립트의 조합으로 특정 노드의 내용보다 단순한 것으로 생각할 수 있습니다.

당신은 옵션의 수 있습니다 (이것은 일반적으로 컨트롤을 제거하는 것보다 더 나은 UI 패러다임이다)가 비활성화의 이유를 설명

1. 당신의 dijit.form.Select을 해제하고 그 아래에 작은 메모를 추가 (또는 값의 설정을) . 귀하의 UI에 따라 내가 시도하고 싶은 것입니다

2. dijit.form.Select의 형제로 <span>을 만들고 CSS를 사용하여 한 번에 하나씩 표시하거나 숨 깁니다. 당신이 당신의 양식을 제출할 때

   은 분명히 당신은 여전히 ​​dijit.form.Select의 가치를 얻을 수 있습니다,하지만 당신은 서버 측 유효성 검사뿐만 아니라 클라이언트 측 유효성 검사를 할 수 있기 때문에 (나는 문제

3. 을하지 않습니다이 :) 희망

   dojo.data API를 사용하여 "${requestScope.clazzes}" 반복기에서 데이터 저장소를 만듭니다. dijit.form.Select을 (프로그래밍 방식으로) 만들 때이 저장소를 사용하십시오. 상기 Select의 현재 값을 어딘가에 추적하십시오. 필요가 없으면 yourSelect.destroy()으로 전화를 걸어 제대로 파괴 한 다음 다시 필요할 때 새 것을 만들고 이전에 저장된 값으로 값을 설정하십시오.

   이것은 나에게 불필요하게 비싸다.