时间戳

首页 > 解决方案 > 如何创建一个动态下拉选择元素，其选项计数根据某个 div 的子元素数量而变化？

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

问题描述

我有一个特定 id（比如#pageContent）的 div，其子元素的数量将发生变化。我有一个选择下拉列表（例如pageSelection），其选项计数应与#pageContent. 如果#pageContentchild count是10，那么里面的options个数pageSelection也应该是10...

下拉列表的最后三个选项保持不变，但值必须相应更改。最初最后三个选项的值是 2、3 和 4。
如果再向 中添加两个子元素#pageContent，那么最后三个选项的值现在应该变为 4、5 和 6。
如果向 中添加了另外 3 个子元素#pageContent，则最后三个选项的值应该变成 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可用于轻松跟踪。

标签： javascriptjquerycsshtml

解决方案

下面是可以帮助你的片段，

修改了 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

推荐阅读