douhao123457 2017-04-09 03:23
浏览 44

依赖表单输入需要从json文件php加载jquery

I am making a web form and some of it needs to be populated with a jQuery.ajax get jsonp call, and I'm having a problem coming up with the needed php code to format that json file.

I have an html page that has a <form> and the select elements are shown below here.

<!-- lang-html -->
<select id="veh_make" name="Make"><option>Make</option></select>
<select id="veh_model" name="Model"><option>Make</option></select>

I'm using jquery.js and jquery-ui.js+css files, and jquery.form.plugins with my functions to populate the vehicle makes and models, but everytime I get an error saying

Error: jQuery18302370089164328284_1491704657702 was not called

I am requesting the file with jQuery.ajax and using get json what needs to be done to my json format to wrap it in the callback=? function or is there a better way to call this file?

content of my make_model_json.php file

[
 {"Make": "Other","Models": ["Other"]}
 ,
 {"Make": "Motorcycle/ATV","Models": ["Other","ATV","Over 600cc","Under 600cc"]}
 ,
 {"Make": "Boat","Models": ["Other","Over 20ft","Under 20ft"]},{"Make": "RV","Models": ["Other","Over 30ft","Under 30ft"]}
 ]

javascript to populate the select elements

var obj_make_model=Array();

function buildYearMenu(){
    var date = new Date();
    this_year = date.getFullYear();

    jQuery('#veh_year, form [name="veh_year"]').append('<option value="Other">Other</option>');
    for(i=this_year; i>=1950; i--){
        jQuery('#veh_year, form [name="veh_year"]').append('<option value="'+i+'">'+i+'</option>');
    }
}

jQuery(document).ready(function(){buildYearMenu();
    jQuery('#veh_year, form [name="veh_year"]').change(function(){
        populateVMakes();
    });

    jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').change(function(){
        populateModels(jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').prop("selectedIndex"));
    });

    jQuery.ajax({
        type: 'GET',
        dataType: 'jsonp',
        jsonp: 'jsonp_callback',
        crossDomain: true,
        url:( "http://www.example.com"+"/ajax/make_model_json.php"+"?callback=?" ),
        async:false,
        error:function(xhr,status,errorThrown){
            //j(xhr+','+status+','+errorThrown);
        },
        success:function(jsonp){
            obj_make_model = jsonp;
            populateVMakes();
            jQuery('form select[name^="veh_year"]').removeAttr("disabled");
        }
    });
});


function populateVMakes(){
    jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').children().remove();
    jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="">Make</option>');
    //jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="Other">Other</option>');
    for (i = 0; i < obj_make_model.length; i++){
        jQuery('#veh_make, form [name="veh_make"], form [name="veh_make"]').append('<option value="'+obj_make_model[i].Make+'">'+obj_make_model[i].Make+'</option>');
    }
}


function populateModels(make_num) {
    make_num = make_num-1;
    jQuery('#veh_model, form [name="veh_model"]').children().remove();
    jQuery('#veh_model, form [name="veh_model"]').append('<option value="">Model</option>');
    //jQuery('#veh_make, form [name="veh_model"]').append('<option value="Other">Other</option>');
    for (i = 0; i < obj_make_model[make_num].Models.length; i++){
        jQuery('#veh_model, form [name="veh_model"]').append('<option value="'+obj_make_model[make_num].Models[i]+'">'+obj_make_model[make_num].Models[i]+'</option>');
    }
}
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 chaquopy python 安卓
    • ¥50 Kubernetes&Fission&Eleasticsearch
    • ¥15 有没有帮写代码做实验仿真的
    • ¥15 報錯:Person is not mapped,如何解決?
    • ¥30 vmware exsi重置后登不上
    • ¥15 易盾点选的cb参数怎么解啊
    • ¥15 MATLAB运行显示错误,如何解决?
    • ¥15 c++头文件不能识别CDialog
    • ¥15 Excel发现不可读取的内容
    • ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题