プロパティ - Javascriptでオプションで入力タイプを動的に追加する



javascript style プロパティ (2)

innerHTMLプロパティを設定するたびに、ブラウザは挿入したDOM要素を作成します。

<select>をinnerHTMLに追加すると、ブラウザが有効なhtmlになるように</select>を追加する可能性が非常に高いです。

その後、オプションを取得するためにそれを取得すると、 <select></select>として戻ってきました。

通常の変数に挿入して一度だけ挿入するために、HTML文字列全体を構築してみてください。

フォームに入力を追加するのがJavascriptでは非常に簡単だとわかっていますが、何らかの理由でオプションで選択入力を追加しても機能しません。 オプションがドロップダウンの外側に表示されています。

ここにjsfiddleのコードがあります: http ://jsfiddle.net/LNVTQ/

ここに私のコードはインラインです:

var choices=[];
choices[0]="one";
choices[1]="two";

function addInput(divName){
    var newDiv=document.createElement('div');
    newDiv.innerHTML="<select>";
    for(i=0; i<choices.length; i=i+1){
        newDiv.innerHTML=newDiv.innerHTML+"<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }
    newDiv.innerHTML=newDiv.innerHTML+"</select>";
    document.getElementById(divName).appendChild(newDiv);
}

そしてHTML:

<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

私は、jQueryまたは単にバニラのJavascriptを使用して回答を受け入れます。


ピュアヴァニラJS

var choices = ["one", "two"];

function addInput(divName) {
    var newDiv = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
    }
    selectHTML += "</select>";
    newDiv.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(newDiv);
}
<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>


jQueryのバージョン

var choices = ["one", "two"];

function addInput(divName) {
    var select = $("<select/>")
    $.each(choices, function(a, b) {
        select.append($("<option/>").attr("value", b).text(b));
    });
    $("#" + divName).append(select);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>





forms