时间戳

首页 > 解决方案 > 合并多个无序列表项并将它们转换为选择下拉列表

jquery - 合并多个无序列表项并将它们转换为选择下拉列表

问题描述

我有一个 BS 4 轮播，每张幻灯片都包含一个链接列表。单击时链接正在加载一些内容。为了在移动设备上获得更好的 UX，我想将所有这些链接（在轮播项目中）合并到一个选择选项下拉列表中。链接保持功能也很重要，以便在单击选择下拉列表中的项目时可以加载适当的内容。

我想用 jQuery 来做这件事。

我已经让它半工作了。我错过了合并部分。

这是我转换前的 HTML：

<div class="carousel-inner">
  <div class="carousel-item active">
    <ul class="majors">
      <li><a href="javascript:switchContent('1')">1</a></li>
      <li><a href="javascript:switchContent('2')">2</a></li>
      <li><a href="javascript:switchContent('3')">3</a></li>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('4')">4</a></li>
      <li><a href="javascript:switchContent('5')">5</a></li>
      <li><a href="javascript:switchContent('6')">6</a></li>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('7')">7</a></li>
      <li><a href="javascript:switchContent('8')">8</a></li>
      <li><a href="javascript:switchContent('9')">9</a></li>
    </ul>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('10')">10</a></li>
      <li><a href="javascript:switchContent('11')">11</a></li>
      <li><a href="javascript:switchContent('12')">12</a></li>
    </ul>
  </div>
</div>

使用此代码：

$(function() {
  $('ul.majors').each(function() {
    var $select = $('<select />');

    $(this).find('a').each(function() {
      var $option = $('<option />');
      $option.attr('value', $(this).attr('href')).html($(this).html());
      $select.append($option);
    });

    $(this).replaceWith($select);
  });
});

这是转换后代码的样子：

<div class="carousel-inner">
  <div class="carousel-item active">
    <select>
      <option value="javascript:switchContent('1')">1</option>
      <option value="javascript:switchContent('2')">2</option>
      <option value="javascript:switchContent('3')">3</option>
    </select>
  </div>
  <div class="carousel-item">
    <select>
      <option value="javascript:switchContent('4')">4</option>
      <option value="javascript:switchContent('5')">5</option>
      <option value="javascript:switchContent('6')">6</option>
    </select>
  </div>
  <div class="carousel-item">
    <select>
      <option value="javascript:switchContent('7')">7</option>
      <option value="javascript:switchContent('8')">8</option>
      <option value="javascript:switchContent('9')">9</option>
    </select>        
  </div>
  <div class="carousel-item">
    <select>
      <option value="javascript:switchContent('10')">10</option>
      <option value="javascript:switchContent('11')">11</option>
      <option value="javascript:switchContent('12')">12</option>
    </select>
  </div>
</div>

但是我如何使它看起来像这样：

<select>
  <option value="javascript:switchContent('1')">1</option>
  <option value="javascript:switchContent('2')">2</option>
  <option value="javascript:switchContent('3')">3</option>
  <option value="javascript:switchContent('4')">4</option>
  <option value="javascript:switchContent('5')">5</option>
  <option value="javascript:switchContent('6')">6</option>
  <option value="javascript:switchContent('7')">7</option>
  <option value="javascript:switchContent('8')">8</option>
  <option value="javascript:switchContent('9')">9</option>
  <option value="javascript:switchContent('10')">10</option>
  <option value="javascript:switchContent('11')">11</option>
  <option value="javascript:switchContent('12')">12</option>
</select>

And do these values work/act like links when each option is selected?

这是我到目前为止所得到的一支笔。

标签： jquery

解决方案

首先构建一个<select>，然后用它替换每个<ul>。

$(function() {
  var $select = $('<select />'); // Start building a <select>
  $('ul.majors a').each(function() { // Grab each hyperlink in each ul.majors
    var $option = $('<option />'); // Build 
    var $option = $('<option />').attr('value', $(this).attr('href')).html($(this).html()); // Update the value from the a's href
    $select.append($option); // Append the option to the <select>
  });

//      // Replace each ul.majors with the select:
//      $('ul.majors').each(function(){
//        $(this).replaceWith($select.clone()); // Need to clone it!
//      })

  // Or, to replace the entire carousel with the dropdown:
  $('.carousel-inner').replaceWith($select);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-inner">
  <div class="carousel-item active">
    <ul class="majors">
      <li><a href="javascript:switchContent('1')">1</a></li>
      <li><a href="javascript:switchContent('2')">2</a></li>
      <li><a href="javascript:switchContent('3')">3</a></li>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('4')">4</a></li>
      <li><a href="javascript:switchContent('5')">5</a></li>
      <li><a href="javascript:switchContent('6')">6</a></li>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('7')">7</a></li>
      <li><a href="javascript:switchContent('8')">8</a></li>
      <li><a href="javascript:switchContent('9')">9</a></li>
    </ul>
    </ul>
  </div>
  <div class="carousel-item">
    <ul class="majors">
      <li><a href="javascript:switchContent('10')">10</a></li>
      <li><a href="javascript:switchContent('11')">11</a></li>
      <li><a href="javascript:switchContent('12')">12</a></li>
    </ul>
  </div>
</div>

推荐阅读