Question

我对选择选项有疑问。是否可以使用jquery更改相对于另一个选定选项的选择选项？在我的情况下，我有一件T恤产品，我已经说出了颜色和尺寸特征。而且我没有为每种颜色提供相同尺寸的选择。因此，当客户端使用jquery选择颜色选项时，可以更改大小选项。更多细节：我有一个使用joomla扩展hikashop的电子商店。在hikashop的后端，我可以为每个产品设置多个特性（选项）。然后，假设给定产品的一个特征（颜色）出现在HTML中，如下所示

 <select id="hikashop_product_characteristic_5" name="hikashop_product_characteristic[5]"
    class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
    <option value="29">Blue</option>
    <option value="11" selected="selected">White</option>
    <option value="12">Red</option>
    </select>

然后第二个特征（大小）出现在下面;

<select id="hikashop_product_characteristic_21" name="hikashop_product_characteristic[21]"      
class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
<option value="18" selected="selected">M</option>
<option value="19">L</option>
<option value="17">S</option>
<option value="20">XL</option>
</select>

注意：我已经联系了hikashop的客户服务，回复是非常复杂的。

Answer 1

您可以直接更改选项，但更简单的解决方案是使用select2之类的插件。

然后就可以这么简单：

$('#inputbox').select2({"data": optionArray});

Answer 2

您可以为选项添加一些属性吗？

如果是，您可以用不同的方式处理问题：

 <select id="hikashop_product_characteristic_5" name="hikashop_product_characteristic[5]"
class="inputbox" size="1">
    <option value="29" data-sizes="18,19">Blue</option>
    <option value="11" selected="selected">White</option>
    <option value="12" data-sizes="18">Red</option>
</select>

<select id="hikashop_product_characteristic_21" name="hikashop_product_characteristic[21]" class="inputbox" size="1">
    <option value="18" selected="selected">M</option>
    <option value="19">L</option>
    <option value="17">S</option>
    <option value="20">XL</option>
</select>

所以javascript看起来像：

$(document).ready(function(){
    $("#hikashop_product_characteristic_5").on("change", function(){
        var sizesToEnable = $(this).find("option:selected").attr("data-sizes").split(","),
          i = 0,
          value;

        $("#hikashop_product_characteristic_21 option").each(function(){
           value = $(this).val();
           if($.inArray(value, sizesToEnable) === true) {
               $(this).removeAttr("disabled");
               continue;
           }
           $(this).attr("disabled", "disabled");
        });
    });
});

使用jquery动态更改选择选项

2 个答案: