javascript - 更改多个选择选项后的 jQuery 触发事件

Question

我试图在选择更改时触发 variationCheck 函数，但是有没有办法可以在触发该函数之前先选择两个选择选项？

有点像验证，但如果用户决定在验证后更改选择选项，仍然可以一次又一次地触发该功能。我希望这是有道理的。

任何帮助都会有帮助!谢谢。

Screenshot

JS

$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
            var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
            variationCheck(get_product_id);
        });

        function variationCheck(get_product_id) {
            for (var i = 0; i < variationArray.length; i++) {
                if (variationArray[i].product_id === get_product_id) {
                    alert(get_product_id);
                };
            };
        };

HTML

<table class="variations" cellspacing="0">
    <tbody>
        <tr>
            <td class="label">
                <label for="covers">Covers</label>
            </td>
            <td class="value">
                <select id="covers" class="" name="attribute_covers" data-attribute_name="attribute_covers">
                    <option value="" selected="selected">Choose an option</option>
                    <option value="5" class="attached enabled">5</option>
                    <option value="6" class="attached enabled" selected="selected">6</option>
                    <option value="7" class="attached enabled">7</option>
                    <option value="8" class="attached enabled">8</option>
                    <option value="9" class="attached enabled">9</option>
                    <option value="10" class="attached enabled">10</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="extras">Extras</label>
            </td>
            <td class="value">
                <select id="extras" class="" name="attribute_extras" data-attribute_name="attribute_extras">
                    <option value="" selected="selected">Choose an option</option>
                    <option value="Fruit" class="attached enabled">Fruit</option>
                    <option value="Cake" class="attached enabled">Cake</option>
                </select><a class="reset_variations" href="#" style="visibility: visible;">Clear</a> </td>
        </tr>
    </tbody>
</table>

Answer 1

我能想到的一种方法是检查两个 Select 元素的值并调用验证方法(如果两者都被选中):

$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
            var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
            if($("select[name=attribute_covers]").val() != "" && $("select[name=attribute_extras]").val() != ""){
            variationCheck(get_product_id);
           }
        });

        function variationCheck(get_product_id) {
            for (var i = 0; i < variationArray.length; i++) {
                if (variationArray[i].product_id === get_product_id) {
                    alert(get_product_id);
                };
            };
        };