HTMLを<select>特定の部門に表示

Question

私はdiv#logに要素を表示しようとしています。私は選択された要素の最後にオプションを挿入するためにjquery append()メソッドを使用しています。

しかし、drop-down listの結果は私が期待したものではありません。

$(document).ready(function() { 
 

 
    // Display DOM to a specific id (div#log) 
 
    $("#log").html("<select class='form-control selcls' id='meterOption'>"); 
 
    var meterNum = 1; 
 
    for (var i = 1; i <= 12; i++) { 
 
    $("#log").append("<option value=" + meterNum + ">" + meterNum + "</option>"); 
 
    meterNum++; 
 
    } 
 
    $("#log").append("</select>"); 
 

 
});

.selcls { 
 
    padding: 9px; 
 
    border: solid 1px #517B97; 
 
    outline: 0; 
 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); 
 
    background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); 
 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div>

コードの一部を以下に示します。

$("#log").html("<select class='form-control selcls' id='meterOption'>"); 
    var meterNum = 1; 
    for (var i = 1; i <= 12; i++) { 
    $("#log").append("<option value=" + meterNum + ">" + meterNum + "</option>"); 
    meterNum++; 
    } 
    $("#log").append("</select>"); 

Answer 1

$(document).ready(function() { 
 

 
    // Display DOM to a specific id (div#log) 
 
    $("#log").html("<select class='form-control selcls' id='meterOption'></select>"); 
 
    var meterNum = 1; 
 
    for (var i = 1; i <= 12; i++) { 
 
    $("#log > select").append("<option value=" + meterNum + ">" + meterNum + "</option>"); 
 
    meterNum++; 
 
    } 
 
    // $("#log").append("</select>"); 
 

 
});

.selcls { 
 
    padding: 9px; 
 
    border: solid 1px #517B97; 
 
    outline: 0; 
 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); 
 
    background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); 
 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"> 
 

 

 
</div>

ない$("#log")、$("#log > select")。

selectに追加する場合は、selectというタグがあります。

しかし、$("#log")が見つかりました。selectタグではありません。

だから、あなたは何をしたい${"#log > select")

Answer 2

1. あなたは選択してオプションを追加し、DIVに選択を追加する必要があります。
2. 現在、このオプションをdivに追加しています。

$(document).ready(function() { 
 

 
    // Display DOM to a specific id (div#log) 
 
    $("#log").html("<select class='form-control selcls' id='meterOption'>"); 
 
    var meterNum = 1; 
 
    for (var i = 1; i <= 12; i++) { 
 
    $("#meterOption").append("<option value=" + meterNum + ">" + meterNum + "</option>"); 
 
    meterNum++; 
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div>

Answer 3

を書くべきである：

$("#log").html("<select class='form-control selcls' id='meterOption'>"); 
#log becomes <select...> 
#log.append("x1") 
#log becomes <select...>x1 
#log.append("x2") 
#log becomes <select...>x1x2 
#log.append("</select>") 
#log becomes <select...>x1x2</select> 

あなたはjQueryのが「役に立つ」とあなたのためにあなたの最初の選択が閉じた得たもの。それが起こっていることが分かっていれば、悪いことではありません。

$("#log").html("<select class='form-control selcls' id='meterOption'>"); 
#log becomes <select...></select> 
#log.append("x1") 
#log becomes <select...></select>x1 
#log.append("x2") 
#log becomes <select...></select>x1x2 
#log.append("</select>") 
#log stays <select...></select>x1x2 

選択肢ではなくdivにオプションを追加しています。

$("#meterOption").append("<option value=" + meterNum + ">" + meterNum + "</option>"); 

は、選択ボックスに項目を追加します。

閉じる/選択を追加する必要はありません。