javascript - 使用 jQuery，如何使用页面的 H4 标题作为选项创建选择列表？

Question

我想获取页面上的所有 H2、H3 或 H4 标题，并使用它们创建 <select>框，其中每个选项都是页面标题。这应该包括该值。我想最终使用选择框来触发事件；每次有人选择一个标题时，每个标题后面的相应段落都会 fadeIn()任何可见的段落都会 fadeOut() .

例如，假设页面如下所示:

<select></select>

<h4>Some title 1</h4>
<p>Paragraph that followstitle 1</p>

<h4>Some title 2</h4>
<p>Paragraph that followstitle 2</p>

变成:

<select>
    <option value="Some title 1">Some title 1</option>
    <option value="Some title 2">Some title 2</option>
</select>

<h4>Some title 1</h4>
<p>Paragraph that followstitle 1</p>

<h4>Some title 2</h4>
<p>Paragraph that followstitle 2</p>

不幸的是，我正在使用 jQuery 1.4.2，无法更改它。

Answer 1

遍历每个 h4 标签并为每个标签创建一个选项:

$('h4').each(function() {
  $('select').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
});