如何将段落文本添加为 select 选项？

Question

我需要更改 select 选项中的第一个选项并将第一段文本放入其中，因此第一段将是第一个 select 元素中的第一个选项文本，并且第二段成为下一个 select 元素中的第一个选项。我知道我的方法根本不正确，但我尝试过但找不到正确的方法。我需要循环吗？或者还有另一种方法吗？我正在尝试使用 jQuery.

$('.select-container p').each(function(index) {
  let textPar = $(this).text();
  
  $('.select-container select option:first-child').each(function(index) {
    $(this).text(textPar);
  });
});

select {
  width: 200px;
  padding: 5px 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="select-container">
    <p>First paragraph</p>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
  <div class="select-container">
    <p>Second paragraph</p>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
</div>

Answer 1

你只需要考虑一下你的 select 或者更好一点。您正在更新 all select 元素的文本，因此您需要更加具体。然后，您不需要在 selecting 后循环一个元素。

$('.select-container p').each(function() {
  const par = $(this);
  const parText = par.text();

  par.next('select').find('option:first-child').text(parText);
});

select {
  width: 200px;
  padding: 5px 8px;
}

<div class="container">
  <div class="select-container">
    <p>First paragraph</p>

    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

  <div class="select-container">
    <p>Second paragraph</p>

    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何将段落文本添加为 select 选项？

How can I add paragraph text as select options?

html

javascript

css

jquery

如何将段落文本添加为​​ select 选项？

How can I add paragraph text as select options?

html

javascript

css

jquery

如何将段落文本添加为 select 选项？