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

使用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');
});

jsフィドル

基本的な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 に挿入しています。contentsHTML で1 つの大きな文字列を作成してから、次のようにすることもできます。

$(contents).appendTo('body');
于 2012-05-31T14:49:42.130 に答える
2

基本的な構文 "document.write(...)" を使用する代わりに、動的要素を使用して新しい HTML 要素を作成する必要があります。

Document.write は、テキストを実際に挿入せずに実際に表示するだけです。後で HTML を編集する場合は、要素を作成してドキュメントに追加する必要があります。

たとえば、「CreateElement」構文を使用します。 これは、フォームを動的に作成する方法を開始するための優れたチュートリアルです。その後、要素を追加して、さらに多くの要素を作成できます。

于 2012-05-31T14:22:06.427 に答える