Ajax表單。更新第二選擇當從第一個選項中選擇一個選項

Question

我想要Javascript，我正在尋找一個表單。我發現了一些我編輯過的代碼，但它不起作用。我試圖做的是一個有2個選擇下拉的表單。當訪問者從第一個下拉列表中選擇一個服務時，第二個下拉列表將自動更新每個服務的員工姓名。我已經將代碼升級爲jsFiddle。網址是http://jsfiddle.net/mrtxR/。我認爲這很簡單，但找不到任何教程和指南。

// The data that the service should return 
// JSFiddle will echo it back for us on that URL 
var doctors = { 
    success: true, 
    doctors: [ 
     { 
      id: 71, 
      name: "George" 
     }, 
     { 
      id: 72, 
      name: "James" 
     } 
    ] 
} 

// This is what your JSON from PHP should look like 
var jsonDoctors = JSON.stringify(doctors); 
console.log(jsonDoctors); 

// Bind change function to the select 
jQuery(document).ready(function() { 
    jQuery("#services").change(onServiceChange); 
}); 

function onServiceChange() 
{ 
    var serviceId = jQuery(this).val();  

    $.ajax({ 
     url: '/echo/json/', 
     type: 'post', 
     data: { 
      serviceId: serviceId, 
      json: jsonDoctors // jsFiddle echos this back to us 
     }, 
     success: onServicesRecieveSuccess, 
     error: onServicesRecieveError 
    }); 
} 

function onServicesRecieveSuccess(data) 
{ 
    // Target select that we add the states to 
    var jTargetSelect = jQuery("#doctors"); 

    // Clear old states 
    jTargetSelect.children().remove(); 

    // Add new states 
    jQuery(data.doctors).each(function(){   
     jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>'); 
    }); 
} 

function onServicesRecieveError(data) 
{ 
    alert("Could not get services. Please try again."); 
} 

Answer 1

您最近的評論是正確的，您應該爲每位醫生添加serviceId。你的假JavaScript可以看起來像：

// The data that the service should return 
// JSFiddle will echo it back for us on that URL 
var doctors = { 
    success: true, 
    doctors: [ 
     { 
      id: 71, 
      serviceId : 1, 
      name: "George" 
     }, 
     { 
      serviceId : 2, 
      id: 72, 
      name: "James" 
     }, 
     { 
      serviceId : 3, 
      id: 73, 
      name: "Ron" 
     }, 
     { 
      serviceId : 1, 
      id : 77, 
      name : "Barak", 

     } 
    ] 
} 

function getJsonDoctors(serviceId) { 
    var result = []; 
    var l = doctors.doctors; 
    for (var i = 0 ; i < l.length ; i++) { 
     if (l[i].serviceId == serviceId) { 
      result.push(l[i]); 
     } 
    } 
    return JSON.stringify({success : true,doctors : result}); 
} 

// This is what your JSON from PHP should look like 
var jsonDoctors = JSON.stringify(doctors); 
console.log(jsonDoctors); 

// Bind change function to the select 
jQuery(document).ready(function() { 
    jQuery("#services").change(onServiceChange); 
}); 

function onServiceChange() 
{ 
    var serviceId = jQuery(this).val();  

    $.ajax({ 
     url: '/echo/json/', 
     type: 'post', 
     data: { 
      serviceId: serviceId, 
      json: getJsonDoctors(serviceId) // jsFiddle echos this back to us 
     }, 
     success: onServicesRecieveSuccess, 
     error: onServicesRecieveError 
    }); 
} 

function onServicesRecieveSuccess(data) 
{ 
    // Target select that we add the states to 
    var jTargetSelect = jQuery("#doctors"); 

    // Clear old states 
    jTargetSelect.children().remove(); 

    // Add new states 
    jQuery(data.doctors).each(function(){   
     jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>'); 
    }); 
} 

function onServicesRecieveError(data) 
{ 
    alert("Could not get services. Please try again."); 
}