Блог

Я создаю пользовательский выпадающий список выбора. Я пытаюсь преобразовать параметры в элементы li, которые работают до сих пор. Для преобразования я просто использую $(selector).each(..). Но я хочу, если они существуют внутри элемента select, преобразовать opgroups в элементы ul и поместить их параметры внутри них как элементы li.

Итак, чтобы затормозить его
, если у меня есть:
<выберите>
<опция>
<опция>
<опция>
</select>
или
<выберите>
<optgroup>

<опция>
<опция>
</optgroup>
</select>

Должно стать:
<li>
<li>
<li>
или
<ul>
<li>
<li>
<li>
</ul>

Как я могу добиться этого в jQuery? Например, я хочу, чтобы optgroups были ul, только если они находятся в выборе. И параметры в правом ul на основе их optgroup. Моя проблема сейчас в том, что я получаю все опции в каждой optgroup (поэтому одни и те же опции в каждой optgroup, что НЕ то, что я хочу).

* Optgroup должна стать ul, к которой должны быть добавлены соответствующие опции в качестве элементов li.

Вы можете проверить, используется ли текущий элемент, на который ссылаются внутри каждого цикла 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> 

С each помощью метода jQuery вы могли бы сделать что-то вроде этого:

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