多个选项可选择创建独特的购物车SKU

Question

有没有将字符串插入字段的方式，字符串是根据从两个下拉菜单中选择的选项来预先确定的？

这样可以使两个下拉菜单的组合为该产品创建一个唯一的SKU，并且将该字符串（称为SKU）插入item_number变量的输入值中，然后在结帐时传递给paypal。

我会用销售T恤的例子。所以组合将是黑/小，黑/大，白/小，&白/大。并且每一个将分别具有独特的TEESHIRT-BS，TEESHIRT-BL，TEESHIRT-WS & TEESHIRT-WL的SKU。

这里是我选择的HTML选项，但是，我认为我需要一些JavaScript将SKU插入值字段。

<input type="hidden" name="on0" value="colour"><b>select colour</b></><br> 
    <select name="os0" > 
    <option value="black">black</option> 
    <option value="white">white</option> 
</select> 
<br> 
<br> 
<input type="hidden" name="on1" value="size"><b>select size</b></><br> 
    <select name="os1" > 
    <option value="small">small</option> 
    <option value="large">large</option> 
</select> 

<!-- SKU--> 
<input type="hidden" name="item_number" value=""> 

Answer 1

尝试以下操作：

var sizeList = document.getElementById('size'); 
 
var colorList = document.getElementById('color'); 
 
sizeList.onchange = function() { 
 
    generateSku(); 
 
}; 
 
colorList.onchange = function() { 
 
    generateSku(); 
 
}; 
 
function generateSku() { 
 
    var selectedSize = sizeList.options[sizeList.selectedIndex].text; 
 
    var selectedColor = colorList.options[colorList.selectedIndex].text; 
 
    document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase(); 
 
} 
 
generateSku();

<input type="hidden" name="on0" value="colour"><b>select colour</b></><br> 
 
    <select id="color" name="os0" > 
 
    <option value="black">black</option> 
 
    <option value="white">white</option> 
 
</select> 
 
<br> 
 
<br> 
 
<input type="hidden" name="on1" value="size"><b>select size</b></><br> 
 
    <select id="size" name="os1" > 
 
    <option value="small">small</option> 
 
    <option value="large">large</option> 
 
</select> 
 

 
<!-- SKU--> 
 
<input id="sku" name="item_number" value="">