Question

我正在尝试使用从子窗体（弹出窗口）调用的ajax调用返回的数据填充父窗口的select元素上的选项。子窗体是通过window.open从父窗体调用的。

奇怪的是，删除选择选项有效；这样成功了：

$('#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);
    }
});

有什么想法吗？

Answer 1

使用.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>

Answer 2

如果要在另一个float AvrgMass; float count = 0f; Vector3 AvrgPoisition = Vector3.zero; void Update(){ foreach (Rigidbody2D Body in "THELAYER") { AvrgPoisition += Body.transform.position; AvrgMass += Body.mass; count++; } AvrgPoissition -= ThisBody.transform.position; AvrgMass -= ThisBody.mass; AvrgPoisition /= count; AvrgMass /= count; }中创建元素，则还必须像在目标中一样在创建中指定它：

document

否则，该元素将在子文档中创建，并且当代码尝试将其添加到父文档中时，将引发错误。

此外，您可以简化$('#selElement', opener.document).append($("<option />", opener.document).val('').text('---Select---')); //Specify the document where the element will be created ^的创建：

option

Answer 3

这是我有时使用的混合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);
    }

使用jQuery从子弹出窗口动态填充父窗口上的选择选项

3 个答案: