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

【问题标题】：Fill select option dropdown list from array in iframe using javascript使用javascript从iframe中的数组中填充选择选项下拉列表
【发布时间】：2014-11-02 21:36:33
【问题描述】：

我正在尝试使用来自对我们服务器的调用的一系列选项填充选择下拉列表。我有服务器调用设置来运行并填充隐藏的 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 中的内容是我需要用来填充选择列表的内容。

感谢您的任何指导或建议，

斯科特

【问题讨论】：

为什么要在隐藏的 iframe 中的 div 标签中以文本形式填写数据？这个 iframe 还能做其他事情吗？为什么不直接使用 AJAX 并将服务器的响应格式化为 JSON 对象并以这种方式加载数据？
我使用 div 标签给整个字符串一个对象名称，我想我可以在父调用中使用它。我还不熟悉 AJAX，举个例子可以帮助我学习...
您实际上将很难解析出var models =，而不是只使用应该格式化的数组。但更重要的是，为什么要隐藏 iframe？您是否考虑过使用 AJAX？
我正在考虑，并希望看到一个例子......

标签： javascript arrays select iframe option

【解决方案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/

【讨论】：