我正在尝试使用对我们服务器的调用中的一系列选项来填充选择下拉列表。我有服务器调用设置来运行并填充隐藏的 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 中的内容是我需要用来填充选择列表的内容。
感谢您的任何指导或建议，
斯科特
最佳答案
我认为你让事情变得比需要的更复杂。您需要从服务器获取一组数据，这正是 AJAX 的用途。
您的服务器不应发送 HTML 响应，而应发送带有数组的 application/json 响应。它应该看起来像这样:
{
"models": ["ACCORD","CIVIC","CR-V","CR-Z","CROSSTOUR","FIT","INSIGHT","ODYSSEY","PILOT","RIDGELINE"]
}
请记住，JSON 对象依赖于键值对。我们只有一项数据(模型数组)，因此我们为其分配了键“模型”。
从这里，只需使用您最喜欢的 AJAX 方法提取数据即可。我在本示例中使用 jQuery，但您也可以使用 XHR 请求来实现非 jQuery 方法。我添加了一个 fiddle ，但请注意，该 fiddle 无法正常“工作”，因为它不在 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);
}
}
关于javascript - 使用 javascript 从 iframe 中的数组填充选择选项下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25745056/