Question

我一直在尝试向div #log显示一个元素。我使用jquery append（）方法在所选元素的末尾插入选项。但是，下拉列表的结果不是我的预期。＆＃13; ＆＃13; $（document）.ready（function（）{＆＃13; ＆＃13; //将DOM显示为特定的id（div＃log）＆＃13; $（＆＃34;＃log＆＃34;）。html（＆＃34;＆lt; select class =＆＃39; form-control selcls＆＃39; id =＆＃39; meterOption＆＃39;＆gt;＆＃34 ）;＆＃13; var meterNum = 1;＆＃13; for（var i = 1; i＆lt; = 12; i ++）{＆＃13; $（＆＃34;＃log＆＃34;）。追加（＆＃34;＆lt;选项值=＆＃34; + meterNum +＆＃34;＆gt;＆＃34; + meterNum +＆＃34;＆lt; /选项＆GT;＆＃34;）;＆＃13; meterNum ++;＆＃13; }＆＃13; $（＆＃34;＃日志＆＃34）。追加（＆＃34;＆LT; /选择＆GT;＆＃34;）;＆＃13; ＆＃13; }）;＆＃13; .selcls {＆＃13; 填充：9px;＆＃13; border：solid 1px＃517B97;＆＃13; 大纲：0;＆＃13; background：-webkit-gradient（linear，left top，left 25，from（#FFFFFF），color-stop（4％，＃CAD9E3），to（#FFFFFF））;＆＃13; background：-moz-linear-gradient（top，#FFFFFF，＃CAD9E3 1px，#FFFFFF 25px）;＆＃13; box-shadow：rgba（0,0,0,0.1）0px 0px 8px;＆＃13; -moz-box-shadow：rgba（0,0,0,0.1）0px 0px 8px;＆＃13; -webkit-box-shadow：rgba（0,0,0,0.1）0px 0px 8px;＆＃13; }＆＃13; ＆lt; script src =＆＃34; https：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"＆gt;＆lt; / script＆gt;＆＃13; ＆lt; div id =＆＃34; log＆＃34;＆gt;＆lt; / div＆gt;＆＃13; ＆＃13; ＆＃13; 代码的一部分如下所示。 $（＆＃34;＃log＆＃34;）。html（＆＃34;＆lt; select class =＆＃39; form-control selcls＆＃39; id =＆＃39; meterOption＆＃39;＆gt;＆＃34 ）; var meterNum = 1; for（var i = 1; i＆lt; = 12; i ++）{ $（＆＃34;＃log＆＃34;）。追加（＆＃34;＆lt;选项值=＆＃34; + meterNum +＆＃34;＆gt;＆＃34; + meterNum +＆＃34;＆lt; /选项＆GT;＆＃34）; meterNum ++; } $（＆＃34;＃日志＆＃34）。追加（＆＃34;＆LT; /选择＆GT;＆＃34）;

Answer 1

您应该在选择中附加选项并将选择附加到div。
目前，您正在将该选项附加到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 2

$(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 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正在＆＃34;乐于助人＆＃34;并为您关闭初始选择。如果你知道它正在发生，那也不是坏事。

$("#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>");

会将项目添加到选择框中。

不需要添加结束/选择。

将HTML <select>元素显示给特定的div

3 个答案: