4

我正在使用 javascript 创建一个动态表单，其中包含一个下拉列表和一个输入文本，如下所示：

$(document).ready(function() {  
    document.write("<FORM>");

    document.write("<SELECT NAME='SelectMenu'>");
    for (var i = 1; i <= 3; i++)
    document.write("<OPTION>" +"one"+"</OPTION>");
    document.write("<OPTION>" +"two"+"</OPTION>");
    document.write("<OPTION>" +"three"+"</OPTION>");

    document.write('</SELECT>');
    document.write("<br>Entry  <input type='text' name='myInputs[]'>");
    document.write("<button onClick="ChoixDeQuestion()">Show</button>");

    document.write('</FORM>');
});

这里的问题是我无法访问这些字段，因为它们甚至不存在于页面的源代码中。我想获取输入的文本值和列表的选定项。所以请有任何想法！！

谢谢

4

3 回答 3

2

您应该使用动态元素并创建新的 HTML 元素，而不是使用基本语法“document.write(...)”。

Document.write 仅实际显示文本而不真正插入它。如果您想稍后编辑 HTML，则需要创建元素并将其添加到文档中。

例如，使用“CreateElement”语法。 这是一个很好的教程，可让您开始了解如何动态创建表单。之后，您可以将元素附加到它，并以这种方式创建更多元素。

于 2012-05-31T14:22:06.427 回答
2

document.write应避免使用。这不是一个好习惯。

您正在使用 jQuery，并且在 jQuery 中动态创建元素非常容易。

你可以做这样的事情，

$(document).ready(function() {  
    var options = '';
    for (var i = 1; i <= 3; i++)
    options +='<option>one</option>';
    options +='<option>two</option><option>three</option>';
    var html = '<select>' + options + '</select><br>Entry <input type="text" name="myInputs[]" />';
    var button = $('<button>Show</button>').click(function(e){
        // Code to be executed when button is clicked

        e.preventDefault();  // since by default button submits the form
        alert('button is clicked');
    });
    $("<form></form>").append(html).append(button).appendTo('body');
});

jsFiddle

如果你知道一个基本的 jQuery，一切都是自我解释的，但如果有什么困扰你，请告诉我 :)

于 2012-05-31T14:49:33.097 回答
2

如果您已经在使用 jQuery，请更多地使用它：

$(document).ready(function() {
    var form = $('<form />'),
    dropdown = $('<select />', {
        name: 'SelectMenu'
    }),
    textbox = $('<input />', {
        type: 'text',
        name: 'myInputs[]'
    }),
    button = $('<button />', {
        text: 'Show'
    }).on('click', ChoixDeQuestion);

    for (var i = 1; i <= 3; i++) {
        $('<option />', {
            text: i
        }).appendTo(dropdown);
    }

    form
        .append(dropdown)
        .append('<br />Entry')
        .append(textbox)
        .append(button)
        .appendTo('body');
});

这是创建所有节点并以一种很好的方式将它们插入到 DOM 中；你也可以contents用你的 html 创建一个大字符串，然后这样做：

$(contents).appendTo('body');
于 2012-05-31T14:49:42.130 回答