與jquery具有相同行爲的多個下拉列表

Question

這被認爲是一個非常簡單的問題，但我似乎無法弄清楚。

我有數據類型方案的形式，其中有人可以輸入有關所提供服務的信息。所以，形式如下

1. [下拉：的serviceType] [下拉：服務] [文本框：信息]
2. [下拉：的serviceType] [下拉：服務] [文本框：信息] ... 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

我會認爲服務類型，服務，信息 的每一三元在其自己的<div>容器包裹，像這樣：

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

正如你可以看到服務類型<select>標有class屬性使它更容易瞄準。因此，假設你所有的服務類型名單已經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 
});

塊內的語句