javascript - 如何使用 Javascript 根据类中的元素填充选择表单(即下拉列表)

Question

我的 html 包含未知数量的特定类元素。

例如:

The point of using Lorem Ipsum is that it has a more-or-less normal 
<span ?class="star-pagination">*112</span> distribution of letters, as 
opposed to using 'Content here, content here', making it look like readable 
English. Many desktop publishing packages and web page editors now use 
Lorem Ipsum as their default model text, and a search for 'lorem ipsum' 
will uncover <span class="star-pagination">*113</span> many web sites still 
in their infancy.

页面加载后，我想填充一个列表，以便用户可以选择与 实例对应的数字。

最终目标最终我希望列表显示关联的页码(例如 112 或 113)而不是实例编号(例如 1、2、3)。最后，一个事件会将用户重定向到相关实例(即，他们将被带到他们选择的“页面”)。

我有以下脚本来检查“星形分页”类中的元素数量。现在它只是写入一个变量来指示文件是否包含带有星号分页的元素。

 <script>
 var x = document.getElementsByClassName("star-pagination");
 if (x.length < 1)
      window.pagination = "unknown";
 else
     {
         window.pagination = "known";
     }
 <script>

问题1)唯一标识每个元素，以便可以将用户推送到该元素。

我考虑过的一种方法是在每个元素处插入一个唯一的 ID，以便在单击即将填充的列表中的选项时，可以触发依赖于“document.getElementById('myDiv').scrollIntoView”的事件();"

 <script>
     var x = document.getElementsByClassName("star-pagination");
     var i;
     for (var i = 0; i< element.length; i++) 
         { 
               x[i].setAttribute("id", i);            
         }
 </script>

但是，这绝对行不通。我不擅长 javascript，肯定在语法上做错了什么。这是一个合理的做法吗？如果是这样，这个语法有什么问题？有更好的方法吗？

问题 2) 填充选择列表，对于 x 中的每个元素递增 1，从第一个实际页码(例如 112)开始，而不是从实例编号(例如 1)开始。据我所知，有两个步骤:(a) 使用列表中的单位动态填充选择表单选项，以及 (b) 检索首页页码。我想有一些基于正则表达式的解决方案，但我不知道如何让它在 JavaScript 中工作。我想我应该问是否有人对最好的方法有什么建议，而不是对此进行黑客攻击？

Answer 1

您可以通过使用 select 元素的 add() 将 option 元素附加到 select 元素来填充下拉列表方法。

var select = document.getElementById("Id_of_my_select_element");
var option = document.createElement("option");
option.value = "option value"; 
option.innerHTML = "option text";
select.add(option);

您有一个好主意，可以向每个检测到的范围添加唯一标识符，但每次添加属性时，最好使用带有 data- 前缀的自定义属性这只是您自己的应用程序使用的。这样您就不必担心 ID 命名冲突，这可能会导致您的页面 HTML 无效(即，如果页面上的多个元素以某种方式最终具有相同的 ID)。

for(var i = 0; i < x.length; i++){
    x[i].setAttribute("data-option",i);
}

以下是所有内容协同工作的示例:

var select = document.getElementById("dropdown");
var pages = document.querySelectorAll(".star-pagination");
// Loop through all matching elements
for (var i = 0, len = pages.length; i < len; i++) {
  // Give the element a custom property by which we can retrieve it
  pages[i].setAttribute("data-option", i);
  // Get the page number from the element
  var text = pages[i].innerHTML;
  var pageNumber = text.slice(1, text.length);
  // Add a corresponding option to the select dropdown
  var option = document.createElement("option");
  option.value = i;
  option.innerHTML = pageNumber;
  select.add(option);
}
select.addEventListener("change", function() {
  var targetElement = document.querySelector("[data-option='" + this.value + "']");
  targetElement.scrollIntoView();
});

#output {
  background-color: #dfdfdf;
  color: darkred;
  font-weight: bold;
  border: 1px solid black;
}
.star-pagination {
  color: blue;
}

<select id="dropdown">
  <options>
    <option>Please choose a page</option>
  </options>
</select>
<div style="max-height:150px;overflow:scroll;">
  <div id="text">The point of using Lorem Ipsum is that it has a more-or-less normal
    <span class="star-pagination">*112</span> distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model
    text, and a search for 'lorem ipsum' will uncover <span class="star-pagination">*113</span> many web sites still in their infancy.</div>
  <br/>
  <br/><span class="star-pagination">*115</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
  <br/>
  <br/><span class="star-pagination">*116</span>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  <br/>
  <br/><span class="star-pagination">*117</span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  <br/>
  <br/><span class="star-pagination">*118</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis
  <br/>
  <br/><span class="star-pagination">*119</span>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  <br/>
  <br/><span class="star-pagination">*120</span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  <br/>
  <br/><span class="star-pagination">*121</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis
  <br/>
  <br/><span class="star-pagination">*122</span>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  <br/>
  <br/><span class="star-pagination">*123</span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  <br/>
  <br/><span class="star-pagination">*124</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis
  <br/>
  <br/><span class="star-pagination">*125</span>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
  <br/>
  <br/><span class="star-pagination">*126</span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
  <br/>
  <br/><span class="star-pagination">*127</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis
  <br/>
  <br/><span class="star-pagination">*128</span>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</div>