Question

我有一个带有产品列表的网上商店，其中变体只能作为选择框输出。

我希望这些选择框显示为文本或ul / li。

<div class="stock proid">
    <Select class="ProductListVariantSelector" id="ProductListVariantSelector" onchange="ProductListVariantSelectorChange(this);">
        <option></option>
        <option value="/shop/basic-body-ls-3097p.html">0-6 mdr.</option>
        <option value="/shop/basic-body-ls-3098p.html">12-18 mdr.</option>
        <option value="/shop/basic-body-ls-3099p.html">18-24 mdr.</option>
        <option value="/shop/basic-body-ls-3100p.html">6-12 mdr.</option>
    </Select>
</div>
<div class="stock proid">
    <Select class="ProductListVariantSelector" id="ProductListVariantSelector" onchange="ProductListVariantSelectorChange(this);">
        <option></option>
        <option value="/shop/bodystocking-med-lange-2678p.html">56</option>
        <option value="/shop/bodystocking-med-lange-2681p.html">74</option>
        <option value="/shop/bodystocking-med-lange-2683p.html">86</option>
        <option value="/shop/bodystocking-med-lange-2684p.html">92</option>
        <option value="/shop/bodystocking-med-lange-2685p.html">98</option>
    </Select>
</div>
<div class="stock proid">
    <Select class="ProductListVariantSelector" id="ProductListVariantSelector" onchange="ProductListVariantSelectorChange(this);">
        <option></option>
        <option value="/shop/bodystocking-med-lange-2603p.html">62</option>
        <option value="/shop/bodystocking-med-lange-2604p.html">68</option>
        <option value="/shop/bodystocking-med-lange-2605p.html">74</option>
        <option value="/shop/bodystocking-med-lange-2606p.html">80</option>
        <option value="/shop/bodystocking-med-lange-2607p.html">86</option>
        <option value="/shop/bodystocking-med-lange-2608p.html">92</option>
    </Select>
</div>

任何人都可以帮忙吗？！

由于

Answer 1

这会将选择框转换为无序列表...

$(function() {
    $("select.ProductListVariantSelector").each(function() {
        var $ul = $("<ul/>");
        $(this).find("option").each(function() {
            if (this.text !== "") {
                $ul.append($("<li/>", { text: this.text }));
            }
        });
        $(this).replaceWith($ul);
    });
});

它还会删除空项，因为我认为它们只是选择中的默认选项。

<强> working jsfiddle example...

Answer 2

$('select').replaceWith(function () {
    var $opt = $(this).find('option[value]'),
        newhtml = '<ul id="' + this.id + '" class="' + this.className + '">';
    $opt.each(function (_, o) {
        newhtml += '<li data-val="' + o.value + '">' + o.innerHTML + '</li>';
    });
    return newhtml += '</ul>'
});

将同一页面上的多个选择框转换为多个ul

2 个答案: