Как создать динамический выпадающий элемент выбора, чей счетчик опций изменяется в зависимости от номера дочернего элемента, который имеет определенный div?

Question

У меня есть 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