optgroup 与 ul 与 li - 编程之家

如何解决optgroup 与 ul 与 li

我正在制作自定义选择下拉列表。我正在尝试将选项转换为迄今为止有效的 li 元素。对于转换，我只使用 $(selector).each(..)。但是我想要，如果它们存在于 select 元素中，则将 opgroups 转换为 ul 元素并将它们的选项作为 li 元素放置在其中。

所以要阻止它
如果我有：

或

应该变成：

或

我如何在 jQuery 中实现这一点？就像我只想在选择中将 optgroups 设为 ul 一样。以及基于他们的 optgroup 的正确 ul 中的选项。我现在的问题是我获得了每个 optgroup 中的所有选项（因此每个 optgroup 中的选项都相同，这不是我想要的）。

*optgroup 应该成为 ul，必须将适当的选项作为 li 元素附加到其上。

解决方法

使用 jQuery each 方法，您可以执行以下操作：

  <select>
    <option value="">Test 1</option>
    <option value="">Test 2</option>
    <option value="">Test 3</option>
  </select>

  <ul></ul>

  <script>

    $(document).ready(function() {
      

      $('select option').each(function() {

        var li = '<li>' + $(this).text() + '</li>';
        $('ul').append(li);

      });


    })

  </script>

您可以使用以下方法检查每个循环内引用的当前元素是否为 OPTGROUP prop("tagName") 如果是，则使用 each loop 循环遍历其中的 option 标签并附加生成的 html 。

演示代码：

var html = "";
$("select > * ").each(function() {
  //check tag name
  if ($(this).prop("tagName") == "OPTGROUP") {
    html += "<ul>" //create ul append it
    //loop throuh options
    $(this).find("option").each(function() {
      html += "<li>" + $(this).text() + "</li>" //append li
    })
    html += "</ul>" //close ul tag
  } else {
    html += "<li>" + $(this).text() + "</li>" //if option is there
  }
})
$("#result").html(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option> S </option>
  <optgroup label="First">
    <option> A </option>
    <option> B </option>
  </optgroup>
  <optgroup label="Second">
    <option> E </option>
    <option> F </option>
  </optgroup>
  <option> R </option>

</select>


<ul id="result"></ul>