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 vc6.0中想运行代码的时候总是提示无法打开文件是怎么回事
    • ¥25 关于##爬虫##的问题,如何解决?:
    • ¥15 ZABBIX6.0L连接数据库报错,如何解决?(操作系统-centos)
    • ¥15 找一位技术过硬的游戏pj程序员
    • ¥15 matlab生成电测深三层曲线模型代码
    • ¥50 随机森林与房贷信用风险模型
    • ¥50 buildozer打包kivy app失败
    • ¥30 在vs2022里运行python代码
    • ¥15 不同尺寸货物如何寻找合适的包装箱型谱
    • ¥15 求解 yolo算法问题