Question

我正在尝试使用此函数添加以下html代码：

    function generateAlbumSelect() {
        alert("test");
        var html="";
        html+="<select id='album_select' style='color:red; font-family:calibri; align:middle; width:430px; height:350px;text-align:center; padding: 10px; font-size: 1.4em; line-height: 1; border: 0; ' onchange='parent.generateTrackSelect(this.selectedIndex);' size=" + albums.length + ">";
        for(var i=0;i<albums.length;i++){
            html+="<option>";
            html+= albums[i].title;
            html+="</option>";
        }
        html+="</select>"

        with(document.getElementById('albums_list_frame').contentDocument){
              open();
              write(html);
              close();
            }


    }

对于这个区块 - 但由于某种原因它不起作用，但警报（“测试”）;确实执行。

   <body onload = "generateAlbumSelect();">
<form name = 'main'>
    <div id="albums_list_frame" class = "panel_top">
        <h2>Album Listing</h2>
    </div>

Answer 1

我强烈建议使用jQuery;它看起来像这样：

function generateAlbumSelect(albums) 
{
    var html = $('<select>') 
                .css({
                        'color':'red', 
                        'font-family':'calibri', 
                        'align':'middle', 
                        'width':'430px', 
                        'height':'350px', 
                        'text-align':'center', 
                        'padding': '10px', 
                        'font-size': '1.4em', 
                        'line-height': '1', 
                        'border': '0'
                    })
                .on('change', function(){
                        generateTrackSelect(this.selectedIndex); // ??
                    });
    $.each(albums, function(idx, val){
        html.append($('<option>').text(val.title));
    })

    $('#albums_list_frame').append(html);
}

$(document).ready(function(){
    var albums = [{title:'title1'}, {title: 'title2'}];
    generateAlbumSelect(albums);
})

其他一些评论：

选择中的CSS样式在大多数情况下没有意义。
您似乎最初想要使用iframe，但不能围绕iframe创建表单，iframe包含来自其他页面的内容。
jsfiddle示例：http://jsfiddle.net/3s32G/

contentDocument不起作用

1 个答案: