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

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

1. 您应该在 select 中附加选项并将 select 附加到 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 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 是“有用的”并为你关闭了你的初始选择。不是一件坏事，如果你知道它正在发生的话。

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

将项目添加到选择框。

关闭/select不需要添加。