使用jQuery从子弹出窗口动态填充父窗口上的选择选项
使用jQuery从子弹出窗口动态填充父窗口上的选择选项
提问于 2019-05-09 02:48:27
我正在尝试用子(弹出)表单调用的ajax调用返回的数据填充父窗口的select元素上的选项。使用window.open从父窗体调用子窗体。
奇怪的是，删除select选项是可行的；这是成功的：
$('#selElement', opener.document).find('option').remove().end();但如下所示，将抛出SCRIPT5022:抛出异常，但未捕获。
$('#selElement', opener.document).append($("<option />").val('').text('---Select---'));我也试过
$('#selElement', opener.window.document).append($("<option />").val('').text('---Select---'));代码如下：
// the line below works; it removes all of the options from the drop-down
$('#selElement', opener.document).find('option').remove().end();
// the ajax call below returns the right data
$.ajax({
url: 'actions.cfc?method=getOptions&returnFormat=json',
dataType: 'json',
// the value being sent here just limits the options returned in the results
data: {myType: $('#myType').val()},
async:false,
success: function(response) {
// getting the right data back
console.log(response);
// the line below results in SCRIPT5022: Exception thrown and not caught
$('#selElement', opener.document).append($("<option />").val('').text('---Select---'));
// never get this far unless I comment out the line above; then the error is thrown here
for (var i = 0; i < response.DATA.length; i++) {
$('#selElement', opener.document).append($("<option />").val(response.DATA[i][0]).text(response.DATA[i][1]));
}
},
error: function (response) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-09 03:30:03
如果您想要在另一个document中创建元素，则必须在创建中指定它，就像在目标中一样：
$('#selElement', opener.document).append($("<option />", opener.document).val('').text('---Select---'));
//Specify the document where the element will be created ^ 否则，将在子文档中创建该元素，并且当代码尝试将其添加到父文档中时，将抛出错误。
此外，您还可以简化option的创建：
$("<option value=''>---Select---</option>", opener.document)Stack Overflow用户
发布于 2019-05-09 03:21:14
使用.map创建您的选项列表并将其附加到选择标签。
const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
$('#selElement', opener.document).append('<select>' + option.join('') + '</select>')
const response = { DATA: [
['Mary', 'Mary'],
['Peter', 'Peter'],
['John', 'John'],
['Abel', 'Abel'],
['Mike', 'Mike']
]}
const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
option.unshift('<option>-----Select-----</option>');
function myFunction() {
const div = document.getElementById('test');
div.innerHTML = ('<select>' + option.join('') + '</select>');
}<button onclick="myFunction()">Try it</button>
<div id="test"></div>
Stack Overflow用户
发布于 2019-05-09 03:31:02
这是我有时使用的jquery/javascript混合解决方案……
var mySubtype = document.getElementById("uploadSubtype");
//Create arrays of options to be added
if(filetype == "2D"){
var array = ['','Proofs','Graphic','Other'];
} else if(filetype == "3D"){
var array = ['','Prelims','Presentation','Controls','Final'];
} else if(filetype == "Accounting"){
var array = ['','W-9','Other'];
}
$( "#uploadSubtype" ).append("<span class='subtype_form_label'>Subtype</span>");
//Create and append select list
var selectList = document.createElement("select");
selectList.id = "subtype";
selectList.name = "subtype";
selectList.classList.add("form_field");
mySubtype.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56047230
复制相关文章
相似问题