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

我有一个特定id的div（比如

#pageContent

），其子元素的数量将发生变化。我有一个选择下拉列表（比如

pageSelection

），其选项计数应与

#pageContent

的子项数匹配。 如果

#pageContent

子计数为10，则

页面选择

中的选项数也应为10

下拉列表的最后三个选项保持不变，但值必须相应更改。最初，最后三个选项的值分别为2、3和4。
如果在

#pageContent

中再添加两个子元素，则最后三个选项的值现在应为4、5和6。
如果在

#pageContent

中再添加3个子元素，则最后三个选项的值应为5、6和7，依此类推

这是我的密码：

函数预处理（）{
var count=document.getElementById（“pageContent”）.childElementCount；
对于（i=0；i

内容01
内容02
苹果
芒果
橙色
苹果
芒果
橙色

下面是一段可以帮助您的代码

修改了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));
  });
}

函数addElement（parentId、elementTag、html）{
var p=document.getElementById（parentId）；
var newElement=document.createElement（elementTag）；
newElement.innerHTML=html；
p、 前置词（新元素）；
var elementValues=[]；
$（“#pageContent”）.children（）.each（函数（）{
elementValues.push（$（this.html（））；
});
$（'#pageSelection'）。查找（'option'）。删除（）。结束（）；
$.each（元素值、函数（索引、值）{
$（'#pageSelection'）。追加（$（''，{value:index}）.text（value））；
});
}

以下是更新后的代码penURL：

---

您能否澄清一下选项编号，您最后的两条陈述建议了不同的起始索引方法。我还将基于数组绑定/呈现html，并使用array.unshift（）方法添加元素。