jquery 선택/옵션 상자 연결 관계

Question

이 경우 자바 스크립트 또는 jquery를 사용하여 가능합니까?

"cl_preAction"클래스의 값을 '003' "End of World"옵션으로 설정하면 "cl_prePRRS"01,02,03 선택 상자의 옵션을 제거하거나 회색으로 표시해야합니다 out (선택할 수 없음 - 가능한 경우)

이 패턴은 페이지에서 여러 번 반복되므로 동일한 ID를 사용하면 작동하지 않습니다.

$('.cl_preAction').live('change', function(){ 
    if ($(this).val() =='003'){ 
    $(this).parent().parent()... 
}); 



<tr> 
    <td>Action</td> 
    <td class='none'> 
     <div data-role='fieldcontain' class='none'> 
     <select name='ACTC' class='none cl_preAction' data-theme='a'> 
      <option data-location='S' value='001'>Fire</option> 
      <option data-location='T' value='002'>Flood</option> 
      <option data-location='T' value='003'>End Of World</option> 
     </select> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td>Reason</td> 
    <td class='none'> 
     <div data-role='fieldcontain' class='none'> 
      <select name='PRRS' class='none cl_prePRRS' data-theme='a'> 
       <option value='01'>Rebuild</option> 
       <option value='02'>Relocate</option> 
       <option value='03'>Cash Payment</option> 
       <option value='04'>Send registered letter indicating this event is not covered</option> 
        </select> 
     </div> 
    </td> 
</tr> 

Answer 1

첫 번째 문제는 선택 옵션을 사용 중지하면 모든 브라우저와 버전에서 안정적으로 작동하지 않는다는 것입니다. 가장 좋은 방법은 원하지 않는 옵션을 제거하는 것입니다. 그러나 사용자가 필요할 때 다른 옵션을 선택하도록하는 무언가를 만들 수도 있습니다.

또한 각 선택 상자 쌍에 대해 다른 규칙에 문제가있을 수 있습니다. '컨트롤'선택 상자에서 옵션 3을 선택하지 않으면 대상 선택 상자의 옵션 1,2,3이 항상 공백으로 표시됩니다.

나는 '데이터'속성을 사용합니다 ...

<select name='ACTC' class='none cl_preAction' data-theme='a' data-target-select="cl_prePRRS"> 

    $('.cl_preAction').live('change', function(){ 
     var me = $(this); 
     if (me.val() =='003') { 
      $("."+me.attr("data-target-select")).filter(function() { 
       return ($(this).val() != '03'); // I think you really want 04 here. 
      }).remove(); 
     } 
    }); 

당신이 정말로 필요하지 않는 DOM을 통해 점프 시도의 길을 가지 마세요. 당신이 선택 상자를 이동하거나 페이지 구조를 변경해야하는 것을 금지하고 천국이 금지되어 있습니다.

이 솔루션은 대상 선택 상자에서 '03'이 아닌 옵션 만 제거한다는 것을 알 수 있습니다. 보관해야하거나 삭제해야하는 옵션 목록을 전달할 수있는 또 다른 "데이터"속성을 쉽게 추가 할 수 있습니다. 옵션의 인덱스를 사용하여이 작업을 수행 할 수는 있지만 유연하지는 않으나 알아 내기가 어려울 수 있습니다.

Answer 2

링크 된 선택기는 항상 인접한 tr 요소에 있습니까?

$('.cl_preAction').live('change', function(){ 
    if ($(this).val() =='003') { 
     $(this).closest('tr').next('tr').find('.cl_prePRRS option').filter(function() { 
      return (parseInt($(this).val(), 10) <= 3); 
     }).remove(); 
    } 
}); 

이에서 옵션을 제거 그것은 당신의 구조에 크게 의존 (당신이 두 개의 선택기를 포함하는 사이 TR 요소에 추가 할 경우,이 실패합니다)한다는 점에서 이것은 그것을 할 우아한 방법이 아니다 DOM.

Answer 3

나는 disabling options will only work in IE 8 이상을 확신합니다. 그러나 이전 버전에서는이를 극복하기 위해 some interesting things you can try이 있습니다.) 기본적으로

, 그것은 다음과 같은

• 는
• 는
• 선언 노드에 select 요소를 찾아 다음 tr 태그를 검색하지, 당신이 그것을 요구로
  는 here's an example that answers the question, 말했다 disabled="disabled"End of World을 선택한 경우
• End of World가에 removeAttr()를 선택 사용되지는 같은 객체를 참조하도록 동일한 범위에 $ (이에게) 여러 번 사용에 대한 계획이라면, 여기서주의 할 값