Ajax表单。从第一个选项中选择一个选项时更新第二个选择 [英] Ajax Form. Update Second Select when choose an option from the first one

问题描述

我要去Javascript，我正在寻找一个表单。我发现了一些我编辑过的代码，但它不起作用。我试图做的是一个有2个选择下拉的表单。当访问者从第一个下拉列表中选择一个服务时，第二个下拉列表将自动更新每个服务的员工姓名。我已经将代码升级为jsFiddle。该网址为 http://jsfiddle.net/mrtxR/ 。我认为这很简单，但找不到任何教程和指南。

I'm to to Javascript and I'm looking to make a form. I found some code that I edited but it doesn't work. What I'm trying to make is a form with 2 select dropdowns. When the visitor chooses one service from the first dropdown, then the 2nd dropdown will be automatically updated with the names of the staff of each service. I have uploded the code to jsFiddle. The url is http://jsfiddle.net/mrtxR/ . I thought it would be really simple but couldn't find any tutorial and guide on this.

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

推荐答案

你最近的评论是正确的，您应该为每位医生添加serviceId。您的假javascript可能如下所示：

Your last comment is correct, you should add serviceId to each doctor. Your fake javascript can look like:

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

这篇关于Ajax表单。从第一个选项中选择一个选项时更新第二个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！