将每个选择选项值转换为值列表

transform each select options value to list of values

本文关键字：转换 列表 选项 选择      更新时间：2023-09-26

我有这个：

<table class="variations" cellspacing="0">
 <tbody>
  <tr>
   <td class="label">
    <label for="pa_varnish_color">Цвет лака</label>
   </td>
    <td class="value">
     <select id="pa_varnish_color" name="attribute_pa_varnish_color">
      <option value="">Выбрать вариант…</option>
      <option value="white" class="active">белый</option>
      <option value="caluzhnica" class="active">калужница</option>
      <option value="oregon" class="active">орегон</option>
     </select> </td>
   </tr>
 <tr>
   <td class="label">
    <label for="pa_type_of_furniture">Тип дерева</label>
   </td>
   <td class="value">
    <select id="pa_type_of_furniture" name="attribute_pa_type_of_furniture">
     <option value="">Выбрать вариант…</option>
     <option value="oak" class="active">Дуб</option>
     <option value="maple" class="active">Клён</option>
     <option value="ash" class="active">Ясень</option>
    </select>
 </tr>
</tbody>
</table>

使用Jquery，我需要将数据从select转换为ul，如下所示：

<ul class="variation-select">
<li></li>
<li>белый</li>
<li>калужница</li>
<li>орегон</li>
</ul>
<ul class="variation-select">
<li></li>
<li>Дуб</li>
<li>Клён</li>
<li>Ясень</li>
</ul>

我也不能使用select id，因为我不知道select的计数，它可以是123或更多，我也不知道id的名称，因为它是在wordpress面板中生成的。所以我通过jquery尝试了什么：

$(".variations_form .variations select").each(function () {
    $j(".summary").append('<ul class=variation-select>' + $j(this).val() + '</ul>');
    $(this).children("option").each(function () {
        $j(".variation-select").append('<li>' + $j(this).val() + '</li>');
    });
});

最后我得到了错误的数据：

<ul class="variation-select">
<li></li>
<li>white</li>
<li>caluzhnica</li>
<li>oregon</li>
<li></li>
<li>oak</li>
<li>maple</li>
<li>ash</li>
</ul>
<ul class="variation-select">
<li></li>
<li>oak</li>
<li>maple</li>
<li>ash</li>
</ul>

有人请帮我了解如何获取每个列表中每个选择的数据。

  • 您使用类variation-select将<li>附加到所有<ul>，而只需要将<li>添加到新创建的<ul>
  • 要获取<option>内部文本而不是其值，可以使用.text()而不是.val()

_

$(".variations_form .variations select").each(function()
{
    var newUl = $('<ul class=variation-select>' + $(this).val() + '</ul>');
    $(".summary").append(newUl);
    $(this).children("option").each(function()
    {
        newUl.append('<li>' + $(this).text() + '</li>');
    });
});

Fiddle。

使用$j（this）.text（）而不是$j（this）.val（），应该没问题。

相关文章：