JSFiddle - React, Tailwind, and code Playground
HTML
<select id="options">
<option value="">Choose...</option>
<option value="3134" >Tight Buffered </option>
<option value="3135" >Loose Tube 900um </option>
<option value="3154" >Loose Tube 2mm </option>
<option value="3136" >Break-Out 2mm </option>
<option value="3138" >Micro Cable 2mm </option>
<option value="3139" >Nano Cable 900um </option>
<option value="3183" >Steel Tape Armoured 900um </option>
</select>
<select id="options2">
<option value="">Choose...</option>
<option value="3111">LC </option>
<option value="3110">LC/A </option>
<option value="3112">E2000 </option>
<option value="3113">E2/A </option>
<option value="3114">FC </option>
<option value="3115">FC/A </option>
<option value="3116">ST </option>
<option value="3117">SC </option>
<option value="3118">SC/A </option>
</select>
<select id="options3">
<option value="">Choose...</option>
<option value="3175">2 </option>
<option value="3121">4 </option>
<option value="3122">6 </option>
<option value="3123">8 </option>
<option value="3124">12 </option>
<option value="3125">16 </option>
<option value="3126">24 </option>
<option value="3176">48 </option>
</select>
<select id="options4">
<option value="">Choose...</option>
<option value="3127">OS1/2 </option>
<option value="3182">G657A1 </option>
<option value="3128">OM1 </option>
<option value="3129">OM2 </option>
<option value="3130">OM3</option>
<option value="3131">OM4 </option>
</select>
<select id="options5">
<option value="">Choose...</option>
<option value="3142">LC </option>
<option value="3143">LC/A </option>
<option value="3144">E2000 </option>
<option value="3145">E2/A </option>
<option value="3146">FC </option>
<option value="3147">FC/A </option>
<option value="3148">ST </option>
<option value="3149">SC </option>
<option value="3150">SC/A </option>
</select>
<select id="options6">
<option value="">Choose...</option>
<option value="3151">LZSH </option>
...
JavaScript
var sku1 = sku2 = sku3 = sku4 = sku5 = sku6 = length = '';
$("#options").change(function(){
switch($(this).val()){
case "":
sku1 = '';
break;
case "3134":
sku1 = 'TB';
break;
case "3135":
sku1 = 'LT';
break;
case "3154":
sku1 = 'LTR';
break;
case "3136":
sku1 = 'BO';
break;
case "3138":
sku1 = 'MC';
break;
case "3139":
sku1 = 'NC';
break;
case "3183":
sku1 = 'STA';
break;
}
$('#sku').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#options2").change(function(){
switch($(this).val()){
case "3111":
sku2 = 'LC';
break;
case "3110":
sku2 ='LCA';
break;
case "3112":
sku2 ='E2000';
break;
case "3113":
sku2 ='E2A';
break;
case "3114":
sku2 ='FC';
break;
case "3115":
sku2 ='FCA';
break;
case "3116":
sku2 ='ST';
break;
case "3117":
sku2 ='SC';
break;
case "3118":
sku2 ='SCA';
break;
}
$('#sku').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#options3").change(function(){
switch($(this).val()){
case "3175":
sku3 = '2';
break;
case "3121":
sku3 ='4';
break;
case "3122":
sku3 ='6';
break;
case "3123":
sku3 ='8';
break;
case "3124":
sku3 ='12';
break;
case "3125":
sku3 ='16';
break;
case "3126":
sku3 ='24';
break;
case "3176":
sku3 ='48';
break;
}
...