javascript - 如何创建一个动态下拉选择元素，其选项计数根据某个 div 的子元素数量而变化？

Question

我有一个特定 id 的 div(比如 #pageContent)，其子元素的数量将发生变化。我有一个选择下拉列表(例如 pageSelection)，其选项计数应与 #pageContent 的子项数相匹配。 如果 #pageContent 子计数为 10，则 pageSelection 中的选项数也应为 10...

下拉列表的最后三个选项保持不变，但值必须相应更改。最初，最后三个选项的值为 2、3 和 4。
如果再向 #pageContent 添加两个子元素，那么最后三个选项的值现在应该变为 4、5 和 6。
如果在 #pageContent 中再添加 3 个子元素，那么最后三个选项的值应该变成 5, 6 & 7 等等......

这是我的代码:

function prependOptions() {
  var count = document.getElementById("pageContent").childElementCount;
  for (i = 0; i < count - 3; i++) {
    var index = i + 1;
    document.getElementById("pageSelection").prepend("<option value=\'" + index + "\'>" + index + "</option>");
  }
}

$(function() {
  $("#pageSelection").change(function() {
    var selectedText = $(this).find("option:selected").text();
    var selectedValue = $(this).val();
    alert("Selected Text: " + selectedText + " Value: " + selectedValue);
  });
});

function addElement(parentId, elementTag, html) {
  var p = document.getElementById(parentId);
  var newElement = document.createElement(elementTag);
  newElement.innerHTML = html;
  p.prepend(newElement);
}

<input type="button" onclick="addElement('pageContent', 'div','Added Fruit');" value="Add an Item" />

<div id="pageContent">
  <div class="pageContentItem">Content01</div>
  <div class="pageContentItem">Content02</div>
  <div class="pageContentItem">Apple</div>
  <div class="pageContentItem">Mango</div>
  <div class="pageContentItem">Orange</div>
</div>

<select name="contentSelector" id="pageSelection">
  <option value="8">Apple</option>
  <option value="9">Mango</option>
  <option value="10">Orange</option>
</select>

codepen可用于轻松追踪。

Answer 1

下面是对你有帮助的代码片段，

修改了 addElement 方法以实现相同。

function addElement(parentId, elementTag, html) {
  var p = document.getElementById(parentId);
  var newElement = document.createElement(elementTag);
  newElement.innerHTML = html;
  p.prepend(newElement);
  var elementValues = [];
  $("#pageContent").children().each(function () { 
    elementValues.push($(this).html()); 
  });
  $('#pageSelection').find('option').remove().end();
  $.each(elementValues, function( index, value ) {
    $('#pageSelection').append($('<option>', { value : index }).text(value));
  });
}

下面是更新后的代码 penURL:

https://codepen.io/redhatvicky/pen/jRPEXq?editors=1010