동일한 양식의 여러 Jquery + Ajax 종속 선택 상자를 처리하는 방법

Question

jquery 및 ajax를 사용하여 양식에서 여러 개의 연결된 선택 상자 행을 처리하는 방법을 알아낼 수 없습니다.

체인 된 선택의 단일 인스턴스를 만드는 방법을 설명하는 많은 자습서가 있지만 불행히도 (적어도 저에게는) 둘 이상의 인스턴스/행의 체인 된 선택 행을 처리하는 방법을 절대로 설명하지 않습니다.

아래와 같이 jquery 코드의 다른 블록을 명시 적으로 작성하여 작동시킬 수 있지만, 문제는 자동으로 생성되는 체인 선택 행이 여러 개있을 수 있다는 것입니다.

이 문제를 해결하려면 체인화 된 선택 행의 모든 ​​행에서 작동 할 수있는 jquery 코드의 단일 블록이 필요합니다. 지금까지 시도한 모든 것은 첫 번째 것 이외의 다른 작업을하는 체인화 된 선택 상자 행을 얻을 수 없다는 전형적인 초보자 문제를 초래합니다.

<form> 
    Connection Type : 
    <select name="contype_01" id="contype_01"> 
     <option value="ssh">SSH</option> 
     <option value="telnet">Telnet</option> 
    </select> 

    Credentials : 
    <select name="creds_01" id="creds_01"> 
     <option> --Please Select-- </option> 
    </select> 

    <br /> <!-- 2nd row of chained selects --> 

    Connection Type : 
    <select name="contype_02" id="contype_02"> 
     <option value="ssh">SSH</option> 
     <option value="telnet">Telnet</option> 
    </select> 

    Credentials : 
    <select name="creds_02" id="creds_02"> 
     <option> --Please Select-- </option> 
    </select> 
    </form> 

그리고 JQuery와 : 당신은 내가 당신을 감사하고, 여기까지를했다면

$(document).ready(function(){ 

    $("#contype_01").change(function(){ 
     var contype=$("#contype_01").val(); 
     $.ajax({ 
      type:"post", 
      url:"ncmexport-helper.php", 
      data:"contype="+contype, 
      success:function(data){ 
       $("#creds_01").html(data); 
      } 
     }); 
    }); 

    $("#contype_02").change(function(){ 
     var contype=$("#contype_02").val(); 
     $.ajax({ 
      type:"post", 
      url:"ncmexport-helper.php", 
      data:"contype="+contype, 
      success:function(data){ 
       $("#creds_02").html(data); 
      } 
     }); 
    }); 


}); 

내 질문은 : 여기

는 HTML입니다 내가 무엇을해야합니까 위에 표시된 jquery 코드의 두 블록을 하나의 블록으로 변환하여 폼에서 여러 개의 체인으로 연결된 셀렉트를 사용할 수 있습니까? 내 매우 제한된 자바 스크립트 및 jquery 기술은 다른 선택 상자 ID를 반복하는 방법을 알기에 아직 충분하지 않습니다.

참고 : 나는 무엇을 말할 수에서 http://phpseason.wordpress.com/2013/02/19/dynamic-dependent-select-box-using-jquery-and-ajax/

Answer 1

, 당신은 (모든 contype의 선택에 변화 핸들러를 바인딩 예를 들어, 클래스 선택기를 사용한다 : 내가 사용 원래 JQuery와/아약스 코드는이 튜토리얼에서 온).

<form> 
Connection Type : 
<select name="contype_01" id="contype_01" class="contype"> 
    <option value="ssh">SSH</option> 
    <option value="telnet">Telnet</option> 
</select> 

Credentials : 
<select name="creds_01" id="creds_01"> 
    <option> --Please Select-- </option> 
</select> 

<br /> <!-- 2nd row of chained selects --> 

Connection Type : 
<select name="contype_02" id="contype_02" class="contype"> 
    <option value="ssh">SSH</option> 
    <option value="telnet">Telnet</option> 
</select> 

Credentials : 
<select name="creds_02" id="creds_02"> 
    <option> --Please Select-- </option> 
</select> 

JS :

$(document).ready(function(){ 

    $(".contype").change(function(){ 
     var element = $(this); 
     var contype = element.val();   
     $.ajax({ 
      type:"post", 
      url:"ncmexport-helper.php", 
      data:"contype=" + contype, 
      success:function(data){ 
       // build the id for creds 
       var id = element.attr("id"); 
       var credId = "#creds_" + id.slice(-2); 
       $(credId).html(data); 
      } 
     }); 
    }); 

});