Несколько вариантов выбирают для создания уникальной корзины для покупок SKU

Question

Есть ли способ вставки строки в поле, в результате чего строка задана в зависимости от того, какие параметры выбраны из двух выпадающих меню?

Это значит, что сочетание двух выпадающих меню создает уникальный SKU для этого продукта, и эта строка, называемая SKU, вставляется во входное значение переменной item_number и затем передается в paypal во время проверки.

Я буду использовать пример продажи футболок. Таким образом, комбинации будут черными/маленькими, черными/большими, белыми/маленькими, & белыми/большими. И каждый будет иметь уникальный SKU TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS TEESHIRT-WL соответственно.

Вот мой 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="">