Question

我想选择woocommerce中的每个变体，但是在选择另一个之后只有一个可用选项。这不仅适用于woocommerce。

以下是示例：

首先选择具有3个选项，第二个选择有1个选项，第三选择有2个选项

但是：当我在第一个选择中选择一个选项时，然后第三个选择只有一个选项可供选择，依此类推。然后脚本应该自动选择此选择，因为只有一个选项可供选择（实际上有两个选项，因为选项“ choose option”始终可用）

看这张图片：在选择“ L1”中有2个选项，但在选择“ L1”中选择“ D1”后仅剩一个选项。！https://imgur.com/a/9xcMEny

HTML代码：

<table class="variations" cellspacing="0">
<tbody>
<tr>
    <td class="label">
        <label for="d1">D1</label>
    </td>
    <td class="value">
        <select id="d1" class="" name="attribute_d1" data-attribute_name="attribute_d1" data-show_option_none="yes">
            <option value="">Choose option</option>
            <option value="2" class="attached enabled">2</option>
            <option value="3" class="attached enabled">3</option>
        </select></td>
</tr>
<tr>
    <td class="label">
        <label for="d2">D2</label>
    </td>
    <td class="value">
        <select id="d2" class="" name="attribute_d2" data-attribute_name="attribute_d2" data-show_option_none="yes">
            <option value="">Choose option</option>
            <option value="6" class="attached enabled">6</option>
        </select></td>
</tr>
<tr>
    <td class="label">
        <label for="l2">L2</label>
    </td>
    <td class="value">
        <select id="l2" class="" name="attribute_l2" data-attribute_name="attribute_l2" data-show_option_none="yes">
            <option value="">Choose option</option>
            <option value="8" class="attached enabled">8</option>
            <option value="14" class="attached enabled">14</option>
        </select></td>
</tr>
<tr>
    <td class="label">
        <label for="l1">L1</label>
    </td>
    <td class="value">
        <select id="l1" class="" name="attribute_l1" data-attribute_name="attribute_l1" data-show_option_none="yes">
            <option value="">Choose option</option>
            <option value="57" class="attached enabled">57</option>
        </select></td>
</tr>
</tbody>

我尝试了类似on.(change,function())的操作，但是当我想“清除”选择或选择第一个选项“选择选项”时出现问题也许还有另一种方法

jQuery(document).ready(function($)
{
    if ($('body.single-product').length)
    {
        if ($('.variations').length)
        {
            var allSelects = $('select');
            allSelects.each(function()
            {
                if ($(this).attr('id') == 'd1')
                {
                    if ($(this).find('option:nth-child(1)').attr('selected') == true)
                    {
                        $(this).on('change', function()
                        {
                            select_if_one_option();
                        })
                    }
                }
            })
        }

        function select_if_one_option()
        {
            if ($('.variations').length)
            {
                var allSelects = $('select');
                allSelects.each(function()
                {
                    var options = $(this).find('option');
                    if (options.length == 2)
                    {
                        $(this).find('option:nth-child(2)').attr("selected", true);
                    }
                })
            }
        }
    }
})

在这段代码中，当我尝试清除选择内容或尝试更改选项时出现问题。我认为.on(change,...)应该先清除所有选择，然后在只有一个可用选择时再选择选择。

仅选择一个选项时自动选择变体

0 个答案: