Develop Reference

Adding placeholder photo for dropdown menu select

I am trying to add a placeholder image in the paragraph tag. The users select an option and the photo is replaced by the one chosen. I have tried to add a photo as a valued on the first option but didn't work. Any ideas please?
select { outline: none; width: 100%; padding: 10px 0; text-align: center;}
<select onchange="document.getElementById('preview2').src = this.value">
<option selected="selected" disabled="disabled">Select a finish</option>
<option value="/images/image1.jpeg">Chrome</option>
<option value="/images/image2.jpeg">Satin Chrome</option>
<option value="/images/image3.jpeg">Black</option>
<option value="/images/image5.jpeg" ">Brushed Brass</option>
<option value="/images/image6.jpeg "">Brushed Nickel</option>
<option value="/images/image7.jpeg" ">Powdercoated Gun Metal</option>
<option value="/images/image8.jpeg "">Gun Metal</option>
<option value="/images/image9.jpeg" ">Antique Brass</option>
<option value="/images/image10.jpeg "">Black Chrome</option>
</select><br />
<p><img id="preview2" alt="" /></p>

Just trigger the change and have the default on the first option:
window.addEventListener("DOMContentLoaded", () => { // when the page haas loaded
const sel = document.getElementById("imgSel");
const img = document.getElementById('preview2');
const changeImg = () => { // called when image needs to be changed
img.src = sel.value;
img.title = sel.value;
console.log(img.src); // for debugging
};
sel.addEventListener("change", changeImg); // better than inline event handler
changeImg(); // initialise
})
#imgSel {
outline: none;
width: 100%;
padding: 10px 0;
text-align: center;
}
img {
height: 100px;
width: 100px;
border: 1px solid black;
}
<select id="imgSel">
<option selected="selected" disabled="disabled" value="/images/default.jpg">Select a finish</option>
<option value="/images/image1.jpeg">Chrome</option>
<option value="/images/image2.jpeg">Satin Chrome</option>
<option value="/images/image3.jpeg">Black</option>
<option value="/images/image5.jpeg">Brushed Brass</option>
<option value="/images/image6.jpeg">Brushed Nickel</option>
<option value="/images/image7.jpeg">Powdercoated Gun Metal</option>
<option value="/images/image8.jpeg">Gun Metal</option>
<option value="/images/image9.jpeg">Antique Brass</option>
<option value="/images/image10.jpeg">Black Chrome</option>
</select><br />
<p><img id="preview2" alt="" /></p>

Locally storing my div in html to save when page is refreshed

I created a div which contains my counter that displays the "(n) option(s) selected." I want to locally store my div into html so that when I refresh my page it remains active. I am new to local storage, but understand it works with key value pairs.
I have created two variables:
var get_count = document.getElementsByClassName("counter");
var save_count = localStorage.getItem("counter");
My first variable returns an HTMLCollection[] and my second variable is returned as undefined. I am confused how to handle my key value pairs in my HTMLCollection[]. How can I locally store my div container that displays the total number of options selected?
$(document).ready(() => {
$.fn.select2.amd.require([
'select2/utils',
'select2/dropdown',
'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
/* gets item */
var previousSelectionCount = window.localStorage.getItem('selectCount');
console.log('*****', previousSelectionCount);
function SelectAll() { }
SelectAll.prototype.render = function (decorated) {
var $rendered = decorated.call(this);
var self = this;
//define the buttons inside the menu
var $selectAll = $('<input type="checkbox"> Select/Unselect All</input>' );
//append the buttons inside the menu
$rendered.find('.select2-dropdown').prepend($selectAll);
$selectAll.on("click", function (e) {
var $results = self.$element.find("option").map(function (idx, ele) {
return ele.value;
});
if($(this).prop("checked") == true){
self.$element.val($results).trigger("change");
}
else{
self.$element.val(null).trigger("change");
}
self.trigger("close")
});
return $rendered;
};
$(".js-source-states").select2({
allowClear: true,
tag: false,
closeOnSelect: false,
placeholder: "Search",
dropdownAdapter: Utils.Decorate(
Utils.Decorate(
Dropdown,
AttachBody,
),
SelectAll
),
});
var placeHolderValue = `${previousSelectionCount}` ? previousSelectionCount : ' # options selected'
var $selectNumber = $(`<div class="counter"> ${placeHolderValue} options selected</div>`);
$(".js-source-states").after($selectNumber);
$(".js-source-states").on("change", function (e){
var selectedOptions = $(this).select2('data').length;
console.log('helllooooo', selectedOptions);
window.localStorage.setItem('selectCount', selectedOptions)
$(this).next(".counter").html(selectedOptions + ' options selected');
});
});
});
#import url("//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css");
select{
width: 100%;
display: block;
margin: 0;
}
ul.select2-selection__rendered li.select2-selection__choice{
display: none !important;
}
.counter{
position: relative;
/* z-index: 100; */
display: block;
height: 34px;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 8px 40px 8px 8px;
border-radius: 2px;
}
.select2-results__option.select2-results__option--selected{
background: blue;
}
.select2-results__option.select2-results__option--highlighted.select2-results__option--selectable
{
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.full.min.js"></script>
<body>
<select class="js-source-states" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select>
<div>
<pre>
</pre>
</div>
<select class="js-source-states" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select>
</body>

You can store it like this:
localStorage.setItem("counter", document.getElementsByClassName("counter")[0]);
And you can load like this:
var save_count = localStorage.getItem("counter");
Yes, you are loading it correctly, but since you never saved it, you have nothing to load.

Change CSS color from select list option

I'm trying to change css based on a select list options, what am I doing wrong?
Help is much appreciated! (I can't change the HTML)
Many thanks.
Erwin
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Use $(this).find('option:selected').data('wapf-label') to get the value of the select and use . instead of # to select elements with a particular class.
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
$("select").change(function() {
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Your option value not is a valid color, you need set a valid color to after set in your style try this:
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="black" data-wapf-label="black">black</option>
<option value="brown" data-wapf-label="brown">brown</option>
<option value="blue" data-wapf-label="blue">blue</option>
</select>
</div>
<div class="sw_poster_text2">My name</div>

Change font-size When Selection is made

I need to change the font-size in a div when someone selects a different font size.
Here is my code which I know is working because I added an alert to it. The only thing not working is it changing the font size.
CSS:
.heading {
font-size:18px;
}
JAVASCRIPT:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});
HTML:
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="position: relative; zindex: 99; width: 220px; padding: 5px; color: #ffffff; text-align: center;"></div>
I just can't figure out what is wrong.

You need to add px to the every option value or valueSelected+'px'

You are missing the "px" from your value. So you can add it to the values of your dropdown or append it in your script like so:
$('#htsize').on('change', function(e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value + "px";
$(".heading").css("font-size", valueSelected);
});
.heading {
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>

Add px as the following code:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected + 'px');
});

$(".heading").css("font-size", valueSelected + 'px');
https://jsfiddle.net/ffpxgqy2/

You need to add the "px" on the css font-size value! Here it's working -
<h1>Hello, World!</h1>
<select>
<option value="12">Default</option>
<option value="14">14 PX</option>
<option value="16">16 PX</option>
<option value="18">18 PX</option>
<option value="20">20 PX</option>
</select>
$("select").on("change", function (e) {
var optionSelectedValue;
$( "select option:selected" ).each(function() {
optionSelectedValue = $( this ).val();
});
$("h1").css("font-size", optionSelectedValue + "px");
});

Try this
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
Jquery
$('#htsize').change(function(event){
var optval= $(this).val();
var optpx= optval + 'px';
$("#headline2").css("font-size", optpx);
});

Show hidden div element based on option selected in select option element

I have a div "businessmodel" with some html element inside that is hidden by default and I want it to display when the option selected in the select option "accounttype" is provider.
Please see the code here:
JavaScript
<script type="text/javascript">
$('#accounttype').bind('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
elseif(i=="1")
{
$('#businessmodel').show();
}
});
</script>
HTML
Account Type
<select name="type" required="" class='selector' id="accounttype" onchange="change(this)">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" style="display:none;">
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>

Try this
<script type="text/javascript">
$(document).ready(function() {
$('select').change(function () {
$('.business').toggleClass('hide');
});
});
</script>
<style type="text/css">
.accounttype {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.business {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.hide {
display: none;
}
</style>
<div class="accounttype">
Show business model :
<select>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="business hide">
Some content goes here
</div>

Try this code.
$('#accounttype').on('change', function() {
var i = this.value;
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
}

<select name="type" required="" class='selector' id="accounttype">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" >
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
$('#accounttype').on('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
});