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."); 
}