Question

我正在尝试将select下拉列表转换为div，非常接近实现这一目标，但是问题是div没有像下拉列表那样分成几组。在我的结果中，我能够将它们转换，但是将所有选项都置于ul下，并且没有将它们分开。

  var $select = $('#miopts2 select'),
            $ul = $('<ul></ul>').attr('id', $select.attr('id')).attr('name', $select.attr('name'));
    
    
        $select.children().each(function(e, i) {
            var $options = $(this);
            $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
        });
    
        $select.replaceWith($ul);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="miopts2" class="border-right-0 border-left-0 my-3">
                        <select name="5:finopt:0" size="1">
                            <option value="Processors;n" selected="">Processors</option>
                            <option value="3.8 GHz;+45.00;">3.8 GHz</option>
                            <option value="4.2 GHz;+45.00;">4.2 GHz</option>
                        </select>
                        <select name="5:finopt:1" size="1">
                            <option value="Memory" selected="">Memory</option>
                            <option value="8GB;+20.00;">8GB</option>
                            <option value="16GB;+20.00;">16GB</option>
                            <option value="32GB;+20.00;">32GB</option>
                            <option value="64GB;+20.00;">64GB</option>
                        </select>
                        <select name="5:finopt:2" size="1">
                            <option value="Storage" selected="">Storage</option>
                            <option value="2TB;+100.00;">2TB</option>
                            <option value="3TB;+100.00;">3TB</option>
                            <option value="512GB SSD;+100.00;">512GB SSD</option>
                            <option value="1TB SSD;+100.00;">1TB SSD</option>
                            <option value="2TB SSD;+100.00;">2TB SSD</option>
                        </select>
                        <select name="5:finopt:3" size="1">
                            <option value="Mouse or Trackpad" selected="">Mouse or Trackpad</option>
                            <option value="Magic Mouse">Magic Mouse</option>
                            <option value="Magic Trackpad">Magic Trackpad</option>
                            <option value="Mouse + Trackpad;+400.00;">Mouse + Trackpad</option>
                        </select>
                        <input type="hidden" name="5:finoptnum" value="4">
                    </div>

These are my Current results.

    <ul name="5:finopt:0">
    <li value="0">Processors</li>
    <li value="0">3.8 GHz</li>
    <li value="0">4.2 GHz</li>
    <li value="0">Memory</li>
    <li value="0">8GB</li>
    <li value="0">16GB</li>
    <li value="0">32GB</li>
    <li value="0">64GB</li>
    <li value="0">Storage</li>
    <li value="0">2TB</li>
    <li value="0">3TB</li>
    <li value="0">512GB SSD</li>
    <li value="0">1TB SSD</li>
    <li value="0">2TB SSD</li>
    <li value="0">Mouse or Trackpad</li>
    <li value="0">Magic Mouse</li>
    <li value="0">Magic Trackpad</li>
    <li value="0">Mouse + Trackpad</li>
    </ul>

This is what I am trying to achieve.

    <ul name="5:finopt:0">
    <li value="0">Processors</li>
    <li value="0">3.8 GHz</li>
    <li value="0">4.2 GHz</li>
    </ul>
    
    <ul name="5:finopt:1">
    <li value="0">Memory</li>
    <li value="0">8GB</li>
    <li value="0">16GB</li>
    <li value="0">32GB</li>
    <li value="0">64GB</li>
    </ul>
    
    <ul name="5:finopt:2">
    <li value="0">Storage</li>
    <li value="0">2TB</li>
    <li value="0">3TB</li>
    <li value="0">512GB SSD</li>
    <li value="0">1TB SSD</li>
    <li value="0">2TB SSD</li>
    </ul>
    
    <ul name="5:finopt:3">
    <li value="0">Mouse or Trackpad</li>
    <li value="0">Magic Mouse</li>
    <li value="0">Magic Trackpad</li>
    <li value="0">Mouse + Trackpad</li>
    </ul>

有什么建议吗？

谢谢。

Answer 1

您尝试遍历选择内容而不是选项。 $ select.childrens（）。each遍历所有选项。因此，您将需要遍历select或需要在当前循环中标识父级。

$select.each(function(e,i){
 $ul = $('<ul></ul>').attr('id', $(this).attr('id')).attr('name', $(this).attr('name'));
 $(this).find('option').each(function(e,i){
 var $options = $(this);
    $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
 })
 //make use of this $ul
 })

Answer 2

如下更新代码。

$('#miopts2 select').each(function() {
    var $select = $(this);
    var $ul = $('<ul></ul>').attr('id', $select.attr('id')).attr('name', $select.attr('name'));

    $select.children().each(function(e, i) {
        var $options = $(this);
        $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
    });

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

您的完整代码如下。

$('#miopts2 select').each(function() {
  var $select = $(this);
  var $ul = $('<ul></ul>').attr('id', $select.attr('id')).attr('name', $select.attr('name'));

  $select.children().each(function(e, i) {
    var $options = $(this);
    $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
  });

  $select.replaceWith($ul);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="miopts2" class="border-right-0 border-left-0 my-3">
  <select name="5:finopt:0" size="1">
    <option value="Processors;n" selected="">Processors</option>
    <option value="3.8 GHz;+45.00;">3.8 GHz</option>
    <option value="4.2 GHz;+45.00;">4.2 GHz</option>
  </select>
  <select name="5:finopt:1" size="1">
    <option value="Memory" selected="">Memory</option>
    <option value="8GB;+20.00;">8GB</option>
    <option value="16GB;+20.00;">16GB</option>
    <option value="32GB;+20.00;">32GB</option>
    <option value="64GB;+20.00;">64GB</option>
  </select>
  <select name="5:finopt:2" size="1">
    <option value="Storage" selected="">Storage</option>
    <option value="2TB;+100.00;">2TB</option>
    <option value="3TB;+100.00;">3TB</option>
    <option value="512GB SSD;+100.00;">512GB SSD</option>
    <option value="1TB SSD;+100.00;">1TB SSD</option>
    <option value="2TB SSD;+100.00;">2TB SSD</option>
  </select>
  <select name="5:finopt:3" size="1">
    <option value="Mouse or Trackpad" selected="">Mouse or Trackpad</option>
    <option value="Magic Mouse">Magic Mouse</option>
    <option value="Magic Trackpad">Magic Trackpad</option>
    <option value="Mouse + Trackpad;+400.00;">Mouse + Trackpad</option>
  </select>
  <input type="hidden" name="5:finoptnum" value="4">
</div>

将多个下拉列表转换为div并将其分组

2 个答案: