JSFiddle - React, Tailwind, and code Playground
HTML
<select id="hikashop_product_characteristic_1" name="hikashop_product_characteristic[1]" class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
<option value="2" selected="selected">Twin</option>
<option value="6">Full</option>
<option value="7">Queen</option>
<option value="8">King</option>
<option value="9">Cal King</option>
</select>
<select id="hikashop_product_option_1" name="hikashop_product_option[1]" class="inputbox" size="1" onchange="hikashopChangeOption();">
<option value="0" selected="selected">No</option>
<option value="775"> Twin ( +
$39.99
)</option>
<option value="774"> Twin Heavy Duty ( +
$49.99
)</option>
<option value="769"> Twin Heavy Duty Glideamatic ( +
$59.99
)</option>
<option value="772"> Twin XL ( +
$39.99
)</option>
<option value="771"> Twin XL Heavy Duty ( +
$49.99
)</option>
<option value="770"> Twin XL Heavy Duty Glideamatic ( +
$59.99
)</option>
<option value="776"> Full ( +
$39.99
)</option>
<option value="777"> Full Heavy Duty ( +
$49.99
)</option>
<option value="778"> Full Heavy Duty Glideamatic ( +
$59.99
)</option>
<option value="773"> Queen ( +
$49.99
)</option>
<option value="779"> Queen Heavy Duty ( +
$59.99
)</option>
<option value="780"> Queen Heavy Duty Glideamatic ( +
$99.99
)</option>
<option value="781"> King ( +
$59.99
)</option>
<option value="782"> King Heavy Duty ( +
$69.99
)</option>
<option value="783"> King Heavy Duty Glideamatic ( +
$99.99
)</option>
<option value="784"> Cal King ( +
$59.99
)</option>
<option value="785"> Cal King Heavy Duty ( +
$69.99
)</option>
<option value="786"> Cal King Heavy Duty Glideamatic ( +
$99.99
)</option>
</select>
JavaScript
var subselectContains = {
"Twin": [0,775,774,769], //Twin
"Twin XL": [0,772,771,770], //Twin XL
"Full": [0,776,777,778], //Full
"Queen": [0,773,779,780], //Queen
"King": [0,781,782,783], //King
"Cal King": [0,784,785,786] //Cal King
};
var productcharacteristics = $("#hikashop_product_characteristic_1");
var solutionOptions = $("#hikashop_product_option_1 option");
productcharacteristics.change(function () {
var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];
if (visibleOptions.length != 0) {
solutionOptions.hide();
solutionOptions.each(function () {
for (var i = 0; i <= visibleOptions.length; i++) {
if (this.value == visibleOptions[i]) {
$(this).show();
}
}
});
} else {
solutionOptions.show();
}
});