带有 ul 和 li 选项的 optgroup

Question

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

所以要停下来
如果我有：

或

应该变成：

或

如何在 jQuery 中实现此目的？就像我想让 optgroups 只有在 select 中时才作为 ul。以及基于其 optgroup 的正确 ul 中的选项。我现在的问题是我在每个 optgroup 中都获得了所有选项（所以每个 optgroup 中的选项都是相同的，这不是我想要的）。

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

Answer 1

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

Answer 2

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

带有 ul 和 li 选项的 optgroup

optgroup with options to ul with li

jquery

select

html-lists

dropdown