与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 
});

块内的语句