Question

我正在尝试填写一个选择下拉列表，其中包含从我们的服务器调用的一系列选项。我有服务器调用设置来运行并填充隐藏的iframe，该部分工作正常。我需要从iframe获取数据并使用该数组填充选项列表。

在主/父页面中，我有选择列表的表格单元格：

  <tr>
    <td><select id="ymm_model" name="vmodel">
    <option value="" selected="selected">Select Model</option>
    </select></td>
  </tr>

此函数位于脚本区域的主/父级中，并由之前的选择列表onchange调用，并且在运行调用以填充iframe后我尝试填充选择列表。 iframe的填充工作并显示数据。

function getModels(make)                // open iframe and do call
        {
        window.frames['dataframe'].window.location.href='http://www.atkcores.com/cgi-bin    /vinholmodel.cgi?myear='+document.vinhol.ymm_year.value+'&mmake='+make;

var select = document.getElementById("ymm_model");
var mods = document.getElementById('dataframe').contentWindow.document.getElementById['models'];
for (var i = 0; i < mods.length; i++) {
    var option = document.createElement('option');
    option.text = option.value = mods[i];
    select.add(option, 1)
    }
    }

我也试过这个函数，该函数从我的服务器脚本加载到iframe的页面和页面加载后运行。

function takedata(passed)
    {
var select = document.getElementById("ymm_model");
var mods = document.getElementById('dataframe').contentWindow.document.getElementById['models'];

for (var i = 0; i < mods.length; i++) {
        var option = document.createElement('option');
        option.text = option.value = mods[i];
        select.add(option, 1)
        }
        }

这是填充iframe的服务器进程中形成的页面。

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
</head>

<script>
function init()
    {
    window.parent.takedata(document.getElementById("moddata").value);
    return true;
    }

</script>

<body onload="init();">
<form name="vinmodels">
<div id="moddata"> var models =["ACCORD","CIVIC","CR-V","DEL SOL","ODYSSEY","PASSPORT","PRELUDE"]; </div>

</form>
</body>
</html>

moddata div中的内容是我需要用来填充选择列表的内容。

感谢您提供任何指导或建议，

斯科特

Answer 1

我认为你使它变得比它需要的更复杂。您需要从服务器获取一组数据，这就是AJAX的全部内容。

您的服务器不应发送HTML响应，而是使用阵列发送application/json响应。它应该是这样的：

{ 
    "models": ["ACCORD","CIVIC","CR-V","CR-Z","CROSSTOUR","FIT","INSIGHT","ODYSSEY","PILOT","RIDGELINE"] 
}

请记住，JSON对象依赖于键值对。我们只有一个数据（模型数组），所以我们已经为它分配了关键的“模型”。

从这里开始，只需使用您最喜爱的AJAX方法提取数据即可。我在这个例子中使用jQuery，但您也可以将XHR请求用于非jQuery方法。我已经包含了一个小提琴，但请注意，小提琴不会“正常”工作，因为它不在atkcores.com域（这是一个跨源共享问题）。

但是，您应该能够理解它的要点并创建自己的版本。

//This is what your server should respond with a type of 'application/json'
var serverResponse = '{ "models": ["ACCORD","CIVIC","CR-V","CR-Z","CROSSTOUR","FIT","INSIGHT","ODYSSEY","PILOT","RIDGELINE"] }';

//This uses jQuery for a quick demonstration, look up how to do AJAX without jQuery using XHR objects if you don't want to use jQuery
$(document).ready(function() {
    $.get('http://www.atkcores.com/cgi-bin/vinholmodel.cgi?myear=2014&mmake=honda')
    .success(function(data) {
        //This will not work on the demo since your server doesn't support CORS, but
        //this is where you would process the data.
        handleResponse(data);
    }).fail(function(jqXHR, message) {
        //In this demonstration, this will always hit because of the above CORS issue
    });

    //Pretend the above AJAX worked, we handle the response
    //Since your server is responding with 'application/json', we don't need to parse
    //the string above as we do here
    handleResponse(JSON.parse(serverResponse));
});

function handleResponse(data) {
    //Server passes the array in a JSON object with the key 'models'
    var modelsArray = data.models;

    var select = document.getElementById('ymm_model');
    for (var i = 0; i < modelsArray.length; i++) {        
        var option = document.createElement('option');
        option.text = option.value = modelsArray[i];
        select.add(option, 1);
    }
}

http://jsfiddle.net/vg0g7gzL/

使用javascript从iframe中的数组中选择选项下拉列表

1 个答案: