时间戳

首页 > 解决方案 > 将 select 及其选项转换为 div

javascript - 将 select 及其选项转换为 div

问题描述

我正在尝试将选择及其选项转换为 div 和子 div。我想要的是每个选择成为具有转换 id 的 div 内的 div（正在工作）并且在那些 div 中我想要它的各自选项，我不知道如何去做，如果有人知道，我将不胜感激.

$('.selects select').each(function(){
  var select = $(this);
  $('#transform').append('<div>');

  select.find('option').each(function(){
    var option = $(this).text();
    $('#transform div').append('<div>'+option+'</div>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>   
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<div id='transform'></div>

标签： javascriptjqueryhtmlloopsdrop-down-menu

解决方案

解决此问题的最简单方法是存储对要附加子 div 的 div 的引用。然后在最后，将父 div 附加到您想要的任何位置。这样你就不必找到/记住孩子们应该去哪里。

$('.selects select').each(function(){
  var select = $(this);
  var $div = $('<div>');

  select.find('option').each(function(){
    var option = $(this).text();
    $div.append('<div>'+option+'</div>');
  });

  $('#transform').append($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selects'>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>   
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<div id='transform'></div>

推荐阅读