Javascript Edmunds自动API输出值Wordpress

我一直试图让Edmunds自动API在Wordpress中工作一段时间。这个网站的代码片段是我能找到的最接近于一组简单的下拉选择，让你选择一辆车的年份、品牌、型号和风格。我用下面的代码做到了这一点

输入数据后，我希望它重定向到另一个页面操作页面，在该页面中，数据可用于从API调用真正的市场价值TMV，并在屏幕上显示

我还需要使用Edmunds API通过电子邮件向访问者发送该车价值的快照。我希望找出如何将它与重力形式结合起来，以及其他一些东西

解决在下一页上输出值的问题是我目前的主要问题，所以这个问题只是集中在这个问题上

我无法在文档中找到有效的解决方案。我知道这与TMV的真实市场价值有关

为了将Edmunds Auto API的常规数据拉入html选择中，此代码非常适合。只是它需要能够以某种方式输出值。在Wordpress中，我不得不在页脚中添加脚本。这是我能让它工作的唯一方法

<!--Form Details to display year/make/model in dropdown -->

<form method="POST" action="one123.php">
       <select id="ajYears" name="ajYears">
        </select>
         <select id="ajMakes" name="makes" disabled="disabled">
            <option>Select Make</option>
        </select>
        <select id="ajModels" name="models" disabled="disabled">
            <option>Select Model</option>
        </select>
        <select id="ajStyles" name="styles" disabled="disabled">
            <option>Select Trim</option>
        </select>
        <input type="submit" value="submit">
</form>

<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    jQuery.noConflict();
</script>

<!-- js code -->
<script>
    var protoCall = "https://";
    var host = "api.edmunds.com";

        // Make sure to change the API KEY
    var apiKey = "API KEY";
    var fmt = "json";
    var standardParams = "&fmt=" + fmt +  "&api_key=" + apiKey + "&callback=?";
    var $yearSelect = jQuery('#ajYears');
    var $makeSelect = jQuery('#ajMakes');
    var $modelSelect = jQuery('#ajModels');
    var $styleSelect = jQuery('#ajStyles');

    // lets bind some events on document.ready.
    jQuery(function(){

        $yearSelect.on('change', function() { getMakeModelsByYear()});
        $makeSelect.on('change', function() { enableModelDropdown() });
        $modelSelect.on('change', function() { getStyles() });

        // lets build the year drop down.
        ajEdmundsBuildYear();

    });

    // method to build the year drop down.
    function ajEdmundsBuildYear()
    {
        var baseYear = 1990,
            endYear = new Date().getFullYear();
        $yearSelect.empty();
        $yearSelect.append('<option value="-1">Select Year</option>');
        for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
        {
            $yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');   
        }
    }

    // get the makes and models for a year in one go...
    function getMakeModelsByYear()
    {
        var year = $yearSelect.val(),
            endPoint = "/api/vehicle/v2/makes",
            view = "basic",
            options = "year=" + year + "&view=" + view + standardParams,
            postURL = protoCall + host + endPoint + "?" + options;
        jQuery.getJSON(postURL,
            function(data) {
                 // clear the make drop down... re add the first option... remove dsiabled attr.
                 $makeSelect.empty();
                 $makeSelect.append('<option value="-1">Select Make</option>');
                 $makeSelect.removeAttr('disabled');
                 $modelSelect.empty();
                 $modelSelect.append('<option value="-1">Select Model</option>');

                 // loop the makes... each make contains model... add the make in make drop down and models in model dd
                 jQuery.each(data.makes, function(i, val) {
                      make = data.makes[i];
                      $makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
                      jQuery.each(make.models, function(x, val){   
                           model = make.models[x];
                           $modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');                 
                      });
                 });
            });
    }

    // since we already grabed the models...
    // now just matter of showing only the matching models for a make.
    function enableModelDropdown()
    {
        var make =  $makeSelect.val();
        $modelSelect.removeAttr('disabled');
        $modelSelect.find('option').not('[value="-1"]').hide();
        $modelSelect.find('option[make=' + make + ']').show();

    }

    // grab the styles... pretty much same as
    // getMakeModelsByYear()
    function getStyles()
    {
        var year = $yearSelect.val(),
            make = $makeSelect.val(),
            model = $modelSelect.val(),
            endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
            view = "basic",
            options = "view=" + view + standardParams,
            postURL = protoCall + host + endPoint + "?" +  options;
        jQuery.getJSON(postURL,
            function(data) {
                 $styleSelect.empty();
                 $styleSelect.removeAttr('disabled');
                 $styleSelect.append('<option value="-1">Select Style</option>');
                 jQuery.each(data.styles, function(i, val) {
                      style = data.styles[i];
                      $styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
                 });
            });
    }
</script>

---

下面是一个现成的api示例，您真的无法编辑这么多。这是他们网站上的一个例子，也做了一些与我需要的稍有不同的事情，但很接近。