optgroup 与 ul 和 li 的选项

Question

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

所以要停下来
如果我有：





或

应该变成：

或

• 
  
• 
  
• 
  

如何在 jQuery 中实现这一点？ 就像我希望只有当它们在选择中时才将 optgroups 作为 ul 。正确的 ul 中的选项基于他们的 optgroup。我现在的问题是我得到了每个 optgroup 中的所有选项（所以每个 optgroup 中的相同选项不是我想要的）。

*optgroup 应该成为 ul，相应的选项必须作为 li 元素附加到该 ul。

Answer 1

您可以使用以下方法检查每个循环内引用的当前元素是否为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>

Answer 2

使用 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>