JSFiddle - React, Tailwind, and code Playground
HTML
<select id="options">
<option value="">Choose...</option> <option value="3370" >Tight Buffered </option> <option value="3371" >Loose Tube 900um </option>
<option value="3375" >Loose Tube 2mm </option> <option value="3372" >Break-Out 2mm </option>
<option value="3373" >Micro Cable 2mm </option> <option value="3374" >Nano Cable 900um </option> <option value="3376" >Steel Tape Armoured 900um </option>
</select>
<select id="options2">
<option value="">Choose...</option>
<option value="3423" >12 MC</option>
<option value="3424" >24 MC</option>
<option value="3425" >48 MC</option>
</select>
<br />
<span class="display_text_here"></span><span class="display_text_here2"></span>
<br />
<input type="text" id="sku">
JavaScript
var sku_part1, sku_part2 = '';
$("#options").change(function(){
switch($(this).val()){
case "3370":
sku_part1 = 'TB';
break;
case "3371":
sku_part1 = 'LT';
break;
case "3375":
sku_part1 = 'LTR';
break;
case "3372":
sku_part1 = 'BO';
break;
case "3373":
sku_part1 = 'MC';
break;
case "3374":
sku_part1 = 'NC';
break;
case "3376":
sku_part1 = 'STA';
break;
}
$('#sku').val(sku_part1);
});
$("#options2").change(function(){
switch($(this).val()){
case "3423":
sku_part2 = '12';
break;
case "3424":
sku_part2 ='24';
break;
case "3425":
sku_part2 ='48';
break;
}
$('#sku').val(sku_part1+sku_part2);
});