从字符串中删除空格并比较选项值以隐藏/显示 DIV

Question

I want to hide/show DIV based on the option value of products. Basically Shopify added option values automatically, including options that contains more than 1 word. I don't have much control over that so I thought maybe I can remove the white space from the values and trigger the action.

<Select id="single-option-selector-product-template-0">
   <option value="Heather Ash">Heather Ash</option>
</Select>

<div id="HeatherAsh" class="colours" style="display:none">Heather Ash </div>

Here's the fiddle ==> https://jsfiddle.net/clemckh/qtwuhb7r/14/

There was a similar question that was answered but this is different approach so I thought I should create a new thread. I am a JS beginner so my code is pretty messy. Any help is very much appreciated!

Answer 1

Try this

 jQuery(function() { jQuery('#single-option-selector-product-template-0').change(function() { $('.colours').hide(); var optionValue = jQuery(this).val(); optionValue = optionValue.replace(/\s+/g, ''); $('#' + optionValue).show(); }); });

 <Select id="single-option-selector-product-template-0"> <option value="White">White</option> <option value="Navy">Navy</option> <option value="Heather Ash">Heather Ash</option> <option value="Heather Grey">Heather Grey</option> </Select> <div id="White" class="colours" style="display:none"> White </div> <div id="Navy" class="colours" style="display:none"> Navy </div> <div id="HeatherAsh" class="colours" style="display:none">Heather Ash </div> <div id="HeatherGrey" class="colours" style="display:none"> Heather Grey </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>