We Keep Coding

Remove white space from string and compare option value to hide/show DIV

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!

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>

Show hide multiple divs based on select value

Looking for some jQuery to help hide and reveal content in a simple form I'm creating.
Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).
I think data attributes would be a good route to go down but a little unsure of where to start.
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>

I highly recommend reading Decoupling Your HTML, CSS, and JavaScript. You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.
$(document).ready(()=>{
$('.js-revealer').on('change', function(){
var $select = $(this);
var $selected = $select.find('option:selected');
var hideSelector = $selected.data('r-hide-target');
var showSelector = $selected.data('r-show-target');
$(hideSelector).addClass('is-hidden');
$(showSelector).removeClass('is-hidden');
});
});
.is-hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box" class="js-revealer">
<option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
<option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
<option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
<option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
</select>
</div>
<div data-response="op1" class="opt-1 is-hidden">
This is content for option 1.
</div>
<div data-response="op2" class="opt-2 is-hidden">
This is content for option 2.
</div>
<div data-response="op3" class="opt-3 is-hidden">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="opt-other is-hidden">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>

Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:
$('#select-box').change(function(){
var selectVal = $(this).val();
$('.content, #other-questions').hide();
$('.content[data-response="op' + selectVal + '"], #other-questions').show();
});
.content, #other-questions {
display: none;
}
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="content" data-response="op1">
This is content for option 1.
</div>
<div class="content" data-response="op2">
This is content for option 2.
</div>
<div class="content" data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I've updated my answer to include classes which are better for selecting elements than data attributes.

I would suggest using classes for this, there is no need for data attributes.
$(function() {
$('#select-box').change(function(){
if($('#select-box').val() == '1') {
$('.response1').show();
$('.response2').hide();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '2') {
$('.response1').hide();
$('.response2').show();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '3') {
$('.response1').hide();
$('.response2').hide();
$('.response3').show();
$('#content').show();
}
});
});
.response1, .response2, .response3 {
display: none;
}
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class='response1' data-response="op1">
This is content for option 1.
</div>
<div class='response2' data-response="op2">
This is content for option 2.
</div>
<div class='response3' data-response="op3">
This is content for option 3.
</div>
</div>
<div id='content' data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>

I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide
to hide the element and show to show the element.
$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
var value = $(this).val();
if(value !="" && value<=3 && value !=0){
console.clear();// to clear older logs.
console.log('Selected value'+$(this).val());
$('[data-response^=op]').attr('class',"hide");//On change hide all div's
var selector = "op"+value;
$(document).find("[data-response='"+selector+"']").attr('class',"show");
$("#other-questions").attr('class',"show");//Show matching div.
}else{
$("#other-questions").attr('class',"hide");
$('[data-response^=op]').attr('class',"hide");
}
})
.hide{
display:none;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="hide">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>

What is a better way to use less code to hide and display select menu content? javascript

UPDATE The option values are not incremental, does that matter? Eg. one option could be apples, the next could be dog
I have multiple drop down menus with multiple options and every time I select an option I display different information but in order to hide it to display a different option's information, I have to compare the current option's value and if it matches, hide it, then show the new option's information.
As an example:
drop-down select menu
<select name="name_of_select_menu" onchange="showContent(value);">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
javascript
<script type="text/javascript">
function showContent($i) {
if($i=="apple"){
document.getElementById('apple').style.display = "inline-block";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "inline-block";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "inline-block";
}
}
content to be displayed
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>
As you can see, this can become a lot... I have like 20 options for one menu... 19 things to check if open and close, then open the actual one that you want to see.

Update:
function showContent(i) {
$(".content>div").hide(); //for arbitrary keywords.
$('div#' + i).css("display", "inline-block");
}
Change the function to:
function showContent(i) {
$("[id*=option]").hide();
$('#' + i).css("display", "inline-block");
}
Read more about attribute selectors

use below code. Check working DEMO
JQUERY
$(document).ready(function(){
$('.content div').hide();
$(document).on('change','select[name="name_of_select_menu"]',function(){
$('.content div').hide();
$('#'+$(this).val()).show();
});
});
HTML
<select name="name_of_select_menu">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>

Using jquery, you can write:
function showContent(i)
document.getElementById(i).style.display = "inline-block";
$("select[name=name_of_select_menu]").find("option").not("option[id=="+i+"]").hide();
}

jsFiddle (Updated)
You can simplify this in a few different ways. Move the change handler out of the HTML and bind to the DOM element directly from your JS. Then capture the value of the form element dynamically, and use that to determine which element to show.
Since you're toggling the visibility of the elements, you need a way to hide all of the elements at once. You can do this using$('.content > div').hide() to hide all of the elements and then $('#yourId').show() to show a specific one.
HTML:
<select name="name_of_menu">
<option value="">label option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
JS (using jQuery):
$(function () {
$('[name="name_of_menu"]').change(function () {
$('.content > div').hide();
$('#' + $(this).val()).css("display", "inline-block");
});
});

Show relevant divs when an html select option is clicked

I want a div to become visible when its corresponding select option is clicked (and to hide others) unfortunately my attempts at JavaScript are terrible.
CSS
#aaa, #bbb, #ccc {
display:none;
}
The HTML (I use the same id name for option and div - is this incorrect?)
<select>
<option>Select</option>
<option id="aaa" value="aaa" onclick="showExtra(this)">AAA</option>
<option id="bbb" value="bbb" onclick="showExtra(this)">BBB</option>
<option id="ccc" value="ccc" onclick="showExtra(this)">CCC</option>
</select>
<div id="aaa">
<p>AAA is aaamazing</p>
</div>
<div id="bbb">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc">
<p>cccor blimey CCC</p>
</div>
The JavaScript
function showExtra(element)
{
I don't have clue .slideToggle("medium");
}

Get rid of the IDs in the <option> elements, they're not needed (or if they are, you need to rename them, e.g. optaaa, so they don't conflict with the IDs of the DIVs). Also, call the function from the dropdown's onchange event, not clicking on the options.
<select onchange="showExtra(this)">
<option>Select</option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>
Give all your DIVs a class, so you can operate on them as a group:
<div id="aaa" class="tab">
<p>AAA is aaamazing</p>
</div>
<div id="bbb" class="tab">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc" class="tab">
<p>cccor blimey CCC</p>
</div>
In the JS, you can then operate on all the DIVs that do or don't match the value.
function showExtra(option) {
var divID = option.value;
$(".tab:not(#"+divID+")").slideUp();
$(".tab#"+divID).slideDown();
}
DEMO

Choose fields to hide/show acording to selected option in dropdown (while edit)

EDITED : (corected code mistake)
I have created a form with several fields, chosen via a dropdown.
This works fine and I can save the data to database.
But the problem is that when I need to edit the data with the form, the jQuery "change" function isn't triggered and the fields shown aren't selected with the dropdown (value of the dropdown is save too).
How can I achieve this? Maybe another jQuery function would be better?
This is my markup and code:
html:
<body>
<div class="div1">
<label class="label1">label1</label>
<select id="select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="div2">
<label class="label2">label2</label>
<input type="text" name="input1" class="input1">
</div>
<div class="div3">
<label class="label3">label3</label>
<input type="text" name="input2" class="input2">
</div>
<div class="div4">
<label class="label4">label4</label>
<input type="text" name="input3" class="input3">
</div>
<div class="div5">
<label class="label5">label5</label>
<input type="text" name="input4" class="input4">
</div>
</body>
jQuery:
$(document).ready(function() {
$('.div2').hide();
$('.div3').hide();
$('.div4').hide();
$('.div5').hide();
$('#select').change(function () {
if ($('#select option:selected').text() == "option1"){
$('.div2').show();
$('.div3').hide();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option2"){
$('.div2').hide();
$('.div3').show();
$('.div4').hide();
$('.div5').show();
}
else if ($('#select option:selected').text() == "option3"){
$('.div2').hide();
$('.div3').hide();
$('.div4').show();
$('.div5').show();
}
});
});
</script>
JSFiddle: http://jsfiddle.net/YNnCw/

If you are willing to use jQuery, I wrote a little script to do just that.
This is just a simple little function to show the data which matches the chosen option in the select with choose Option. First it hides all the option class items, then is shows the items with the class which equals the chosen option. The id is the class of all the options used for this instance. This allows you to have more than one of these on a page.
You can look at the example below.
The rows in the form show or don't show based on the classes. For example . The "optionName" in the div class is the same as the ID of the master selector, and thus gets hidden. If the selection value
is option3 then that div will show.
Option Type:
<select name="optionName" id="optionName" class="chooseOption">
<option value = "" >Select a Type</option>
<option value = "option1">option1</option>
<option value = "option2">option2</option>
<option value = "option3">option3</option>
</select>
<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>
<script type="text/javascript">
$(".optionName").hide();
$("document").ready(function() { /// have to wait till after the document loads to run these things
$("select.chooseOption").change(function(){
$("."+this.id).hide();
var thisValue = $(this).val();
if (thisValue != "")
$("."+thisValue).show();
});
});
</script>

You make a mistake it should be:
$('#select option:selected').text()
here the updated fiddle