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>

Open div only after selecting option

I have a Wordpress with a Ninjaform calculated form. I have a dropdown list, and I would like to display the calculation DIV only after the dropdown is selected, but open automatically.
This is my select input (which I cannot change):
<select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-element">
<option value="-" selected="selected">Seleccionar kilates</option>
<option value="14k">14k (joyas)</option>
<option value="18k">18k (joyas)</option>
<option value="22k">22k (monedas)</option>
<option value="24k">24k (lingotes)</option>
<option value="no-estoy-seguro-a">No estoy seguro/a</option>
</select>
This is my div:
<span>
<div class="calculator-item-list">
<div class="item-block calculator-item">
<p><br>
<span class="weight">Total de oro:</span>
<span class="headline2">{calc:Total} €</span>
<span class="weight">{calc:Susgramos} gramos</span>
<span class="large">Le pagamos a {calc:Porgramo} € el gramo</span>
<span class="weight">Gastos de valoración: -20€</span>
<br>
<span class="weight">Precio final:</span>
<span class="headline">{calc:Totals} €</span>
</p>
</div></div>
</span>
The div I can change and css. Also I can add a script to my header or footer.
Please help me, as I have tried various options but none seem to work.
So ideally, after the user selects an option from the dropdown, the result div shows up, before this it must be hidden.
I know an easy option would be with a hidden checkbox and label for clicking but I need an automatic solution, which works without cliking on any button to submit.
Here is link to my page: https://comprooroenmalaga.com/vender-oro-online/
Many thanks,
Bee

While you said that you cannot change the Select and Options, I'm going to assume that you mean the values of them.
Change it to this:
<select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-
element" onchange="showDiv(divToShow)">
<option value="-" selected="selected">Seleccionar kilates</option>
<option value="14k">14k (joyas)</option>
<option value="18k">18k (joyas)</option>
<option value="22k">22k (monedas)</option>
<option value="24k">24k (lingotes)</option>
<option value="no-estoy-seguro-a">No estoy seguro/a</option>
</select>
And your div:
<span>
<div class="calculator-item-list" id="divToShow" style="display: none;">
<div class="item-block calculator-item">
<p><br>
<span class="weight">Total de oro:</span>
<span class="headline2">{calc:Total} €</span>
<span class="weight">{calc:Susgramos} gramos</span>
<span class="large">Le pagamos a {calc:Porgramo} € el gramo</span>
<span class="weight">Gastos de valoración: -20€</span>
<br>
<span class="weight">Precio final:</span>
<span class="headline">{calc:Totals} €</span>
</p>
</div></div>
</span>
Then :
<script>
function showDiv(id){
//For ease
var x = document.getElementById(id);
x.style.display = "block";
}
<script>

You can either use the change on select or use selected.
$(document).ready(function() {
$("#dropdown").change(function() {
$("#show").show();
})
})
#show {
display: none;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="" id="dropdown">
<option value="test1">TEST1</option>
<option value="test2">TEST2</option>
<option value="test3">TEST3</option>
<option value="test4">TEST4</option>
<option value="test5">TEST5</option>
</select>
<div id="show">
TEST SHOW
</div>

You can use jQuery to detect the dropdown change/select and then fire your div to show. This code assumes that your .calculator-item-list div has the CSS display property set to none e.g. display:none;.
UPDATE: I suspect OP's html is being created dynamically.
$(document).ready(function() {
console.log('fired');
$(window).on('change', '#nf-field-5', function(){
console.log('Change hit');
$('.calculator-item-list').show();
});
});

By Using Dropdown how to Show/Hide the images

I am trying to create a car rental form to calculate the order sheet.
My question is when the user selects the car type from a list box or drop-down list it should work with the image.
<form width="900px" height="900>
<center><h1><span class="alternate-font">Rent a Car</span></h1></center>
<div>
<script type="text/javascript">
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$('.drop-down-show-hide').hide()
$('#' + this.value).show();
});
</script>
<select id="dropDown">
<option>Choose a Car</option>
<option value="comp">Compact Car - $29.99</option>
<option value="mid">Midsize Car - $39.99</option>
<option value="lux">Luxury Car - $49.99</option>
</select>
<div id="comp" class="drop-down-show-hide"><img src="img/economy.png" alt="" width="300px" height="200px"/></div>
<div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png" alt="" width="300px" height="150px"/></div>
<div id="mid" class="drop-down-show-hide"><img src="img/luxury.png" alt="" width="300px" height="150px"/></div>
<br>
<select name="cars">
<option>Select Your City</option>
<option value="sfo">San Francisco</option>
<option value="la">Los Angeles</option>
<option value="lux">Luxury</option>
</select>
</form>

What you want to do is move the script right before the ending body tag in your html, and at the very least after the HTML of your dropdown menu.
What is happening right now is that the script is executing before the dropdown is even being added to the DOM. Thus, your event
$('#dropDown').change(function () {
and any element you are binding does not exist.
Also, two minor errors you want to change in your code:
1.
<form width="900px" height="900>
There needs to be a closing quote after height. I suggest using a nice text editor with JS capabilities to check that for you.
2.
<div id="comp" class="drop-down-show-hide"><img src="img/economy.png" alt="" width="300px" height="200px"/></div>
<div id="mid" class="drop-down-show-hide"><img src="img/Midsize.png" alt="" width="300px" height="150px"/></div>
<div id="mid" class="drop-down-show-hide"><img src="img/luxury.png" alt="" width="300px" height="150px"/></div>
Make sure id's are unique. In this case the 2nd and 3rd element share the same id, which will cause element selection issues.

jQuery show/hide based on select dropdown not working as expected

I'm attempting to show/hide <div>'s based on values chosen from a select drop-down menu.
HTML
<select id="selReport">
<option value="Report One">Report One</option>
<option value="Report Two">Report Two</option>
<option value="Report Three">Report Three</option>
<option value="Report Four">Report Four</option>
</select
<div id="Report One" class="description">
<p>...</p>
</div>
<div id="Report Two" class="description">
<p>...</p>
</div>
I'm using the following jQuery snippet to hide the <div>'s and then show them based on what is selected in the drop-down menu:
jQuery
$('.description').hide();
$('#selReport').change(function () {
$('description').hide()
$("[id='" + this.value + "'").show();
});
When a new option is selected from the drop-down menu the previous <div> that was displayed doesn't hide. It stays displayed and I don't know why. Can someone offer a suggestion?

First change your ids to dont have any spaces (space is an invalid character for IDs) like follows:
<div id="Report-One" class="description">
<p>...</p>
</div>
<div id="Report-Two" class="description">
<p>...</p>
</div>
And second (little typo here :)) change:
$('description').hide();
to:
$('.description').hide();

You have to change
$('description').hide() // tag selector
by
$('.description').hide() // class selector
Your code as it is, selects elements with tag description what is not what you're looking for
EDIT
Missed the Id thing (credit to #taxicala). Definitively you need to change your ids.
<select id="selReport">
<option value="ReportOne">Report One</option>
<option value="ReportTwo">Report Two</option>
<option value="ReportThree">Report Three</option>
<option value="ReportFour">Report Four</option>
</select
<div id="ReportOne" class="description">
<p>...</p>
</div>
<div id="ReportTwo" class="description">
<p>...</p>
</div>

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