Question

我有这个：

<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，因为我不知道选择的数量可能是1 2 3或更多，而且我也不知道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>

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

Answer 1

您要将<li>追加到<ul>个班级variation-select，而您只需将<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

Answer 2

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

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

2 个答案: