jquery와 동일한 동작을하는 여러 개의 드롭 다운 목록

Question

이것은 매우 간단한 질문 인 것으로 생각되지만 생각할 수 없습니다.

데이터 형식 시나리오가 있습니다. 여기에는 제공되는 서비스에 대한 정보를 입력 할 수있는 시나리오가 있습니다. [: ServiceType 자리 드롭 다운] [드롭 : 서비스] [텍스트 상자 : 정보]

[드롭 : ServiceType 자리] [드롭 : 서비스] [텍스트 상자 : 정보] ... 그래서 양식이

1. 처럼 보인다 5 드롭 다운 : ServiceType 자리] [드롭 : 서비스] [텍스트 상자 : 정보]

내가 선택 서비스 유형 목록을 기반으로 채워 해당 서비스 목록을 원하는, 그래서 나는 다음과 같은 코드가 있습니다

$(document).ready(function() { 
     $("select#serviceType").change(function() { 
      var serviceId = $("#serviceType > option:selected").attr("value"); 

      $.ajax({ 
       type: "GET", 
       contentType: "application/json; charset=utf-8", 
       url: "GetServicesByServiceType/" + serviceId, 
       data: "{}", 
       dataType: "json", 
       success: function(data) { 
        var options = ''; 
        for (index in data) { 
         var service = data[index]; 
         options += "<option value='" + service.ServiceId + "'>" + service.Name + "</option>"; 
        } 
        $("#services").removeAttr('disabled').html(options); 
       } 
      } 
      ); 
     }); 
    }); 

을

나는 다음과 같은 문제를 겪고 :

1. 내가 특정 요소의 ID를 참조하고는, 대신에 내가 요소의 수는 다양하기 때문에 즉, 프로그래밍 방식으로 파악해야 할 것이다.
2. 나는 서비스가 크게 감상 할 수 부하

어떤 도움을에뿐만 아니라 초기뿐만 아니라 선택의 변화에 ​​새로 드롭 다운 싶어!

Answer 1

좋아, 알아 냈어. 값이 변경 될 때 TR 내의 각 계단식 드롭 다운 목록이 업데이트되고로드시 실행됩니다.

$(document).ready(function() { 
     var populateDropDowns = function() { 
      var currentDropdown = $(this); 
      var serviceId = $(this).val(); 
      $.ajax({ 
       type: "GET", 
       contentType: "application/json; charset=utf-8", 
       url: "/GetServicesByServiceType/" + serviceId, 
       data: "{}", 
       dataType: "json", 
       success: function(data) { 
        var options = ''; 
        for (index in data) { 
         var service = data[index]; 
         options += "<option value='" + service.ServiceId + "'>" + service.Name + "</option>"; 
        } 

        currentDropdown.closest('tr').find("select.services").html(options); 
       } 
      } 
      ); 
     }; 

     $('select.currentServices').each(populateDropDowns); 
     $('select.currentServices').change(populateDropDowns); 
    }); 

Answer 2

내가 ServiceType 자리, 서비스, 정보 의 각 트리플렛과 같이 자신의 <div> 용기에 넣어 진 것으로 가정합니다 : 당신은 ServiceType 자리 <select>가 class 특성으로 표시되어 볼 수 있듯이

<div> 
    <select class="type"> 
     <option value="type1">ServiceType 1</option> 
     <option value="type2">ServiceType 2</option> 
    </select> 
    <select class="service"/> 
    <input type="text" /> 
</div>

는 그것을 만들 쉽게 타겟팅 할 수 있습니다. 그래서 모든 ServiceType 자리 목록은 class=type 한 가정, 당신은 지금

$(function(){ 
    $('select.type').change(function(){ 
     var serviceId=$(this).val(); //'this' keyword refers to 
            //the dropdownlist that triggered the event 
     $.ajax({ 
       ... //other stuff 
       success: function(data){ 
          ... //parse data 
          /*siblings('select') will select all 
           the other <select> elements in the same container, 
           which now happens to be the <select class='service'/> 
           inside the parent <div>*/ 
          $(this).siblings('select').removeAttr('disabled').html(options); 
         } 
     }); 
    }); 
}); 

지금까지 아주 사소한해야 변화에 대한 서비스 드롭 다운리스트 새로 고침을 쓸 수 있습니다 :

$('select.service').change(function(){ 
    ... //do stuff here 
}); 

페이지로드에 아무것도 할하려면

$(function(){ 
    ...//will execute after dom is ready, ie after page loads 
});

블록 내부의 명세서를 포함