We Keep Coding

Dropdown select reloads to first option when reloaded

Hello I am having problems with the select dropdown. I am trying to store the value but it's not working.
I have looked at other questions already but with no luck.
Here is a fiddle:
function selectCss(element) {
const a = element.options[element.selectedIndex].value;
document.getElementById("change").onchange = function() {
localStorage['colorPick'] = element.options[element.selectedIndex].value;
}
window.onload = function() {
if (localStorage['colorPick'])
document.getElementById("change").value = localStorage['colorPick'];
}
if (a == "Theme 1") {
document.body.style.background = "pink";
}
if (a == "Theme 2") {
document.body.style.background = "blue";
}
if (a == "Theme 3") {
document.body.style.background = "yellow";
}
}
body {
background: pink;
}
<select id="change" name="colorPick" onchange="selectCss(this)">
<option selected value="Theme 1">Theme 1</option>
<option value="Theme 2">Theme 2</option>
<option value="Theme 3">Theme 3</option>
</select>

The code has several issues:
The value of the select and the color should be set if there's an item in the localStorage. This should be done at first instead of doing it inside the function.
It's better to use else-if instead of comparing the value three times.
The listener is already set onchange in the html element, so it should not be declared in the function.
You can define the element once and use it all the time.
You can get the selected value using select.value where select is the html element in this example
The working solution with the proper modifications would be as follows:
let select = document.getElementById("change")
if (localStorage['colorPick']){
select.value = localStorage['colorPick'];
selectCss();
}
function selectCss() {
const a = select.value;
localStorage['colorPick'] = a;
if (a == "Theme 1") {
document.body.style.background = "pink";
}else if (a == "Theme 2") {
document.body.style.background = "blue";
}else if (a == "Theme 3") {
document.body.style.background = "yellow";
}
}
body {background: pink;}
<select id="change" name="colorPick" onchange="selectCss()">
<option selected value="Theme 1">Theme 1</option>
<option value="Theme 2">Theme 2</option>
<option value="Theme 3">Theme 3</option>
</select>

Use setItem method To store to local storage.
localStorage.setItem("colorPick", element.options[element.selectedIndex].value);
Use getItem method to retrieve
let colorPick = localStorage.getItem("colorPick")

Why ID is not taking while two selection boxes in the form?

I have two selection boxes in the form listing below, Both have different id "language" and "time". Now the problem is my script is not showing error correctly. I put Border color to show error.
Can someone help me with this?
<div class="field_wrap">
<select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
<option value="0" disabled selected>Prefered Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Tamil</option>
<option value="4">Malayalam</option>
</select></div>
<div class="field_wrap">
<select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
<option value="0" disabled selected>Time to Contact</option>
<option value="1">8 - 10 AM</option>
<option value="2">10 - 12 AM</option>
<option value="3">12 - 2 PM</option>
<option value="4">2 - 5 PM</option>
<option value="5">5 - 8 PM</option>
</select></div>
</div>
My Script :
function validateSelect(language) {
var myValue = document.getElementById('language').value;
if(myValue > 0) {
document.getElementById('language').style.borderColor ='#80c75a';
document.getElementById('languageError').style.display = "none";
return true;
} else {
document.getElementById('language').style.borderColor ='#e35152';
return false;
}
}
function validateSelect(time) {
var myValue = document.getElementById('time').value;
if(myValue > 0) {
document.getElementById('time').style.borderColor ='#80c75a';
document.getElementById('timeError').style.display = "none";
return true;
} else {
document.getElementById('time').style.borderColor ='#e35152';
return false;
}
}
// Validate Select
if (!validateSelect(document.getElementById('language'))) {
document.getElementById('languageError').style.display = "block";
error++;
}
if (!validateSelect(document.getElementById('time'))) {
document.getElementById('timeError').style.display = "block";
error++;
}

You have some errors in your code:
you declare function validateSelect twice
you pass there an element while an element id is expected in the function
onblur event handler in your selects should accept parameter in quotes
Here is what your javascript should look like:
function validateSelect(id){
var el = document.getElementById(id),
myValue = el.value;
if(myValue > 0){
el.style.borderColor ='#80c75a';
document.getElementById(id+'Error').style.display = "none";
return true;
}else{
el.style.borderColor ='#e35152';
return false;
}
}
// Validate Select
validateSelect('time');
validateSelect('language');
Your onblurs should look like:
onblur="validateSelect('language')" and onblur="validateSelect('time')"
Check fiddle: JS Fiddle

How to add a "random" button that applies to two drop down menus

I have created a page with two drop-down menus containing various values.
Now I would like to add a "randomize" button. When clicked, this button would select any of the values at random in both fields. (the values are also copied on a box above each menu).
Project idea for drop down menus
So far I've coded the menus and the words display in the boxes above them when the user selects them. But now I'm trying to add a randomise button that would put any of the values in the drop down as selected and of course displayed in the above text box. Ideally, more values in the drop-down menus would be added every once in a while without making the script dysfunctional... and ideally it would all be contained in a HTML file (calling for JQuery or javascript is ok).
I've looked at this but it doesn't apply.
I also looked at this but it's not really a feature that the user activates.
Very grateful if anyone can help! Thanks

hope this helps
HTML :
<select id="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="s2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Javascript:
var minNumber = 0;
var maxNumber = 3;
function randomNumberFromRange(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
I create this fiddle for you...
https://jsfiddle.net/s59g8vdp/

The first example you have provided is very close to what you want to do. You just need to:
Get a random value between 0 and options.length - 1.
Get option[random] and set its selected property to true.
Copy that option's .innerHTML or .value to the .innerHTML or .value of the label on top of the dropdowns.
This is all you probably need:
function randomizeSelect(selectId, fieldId) {
var options = document.getElementById(selectId).children;
var random = Math.floor(options.length * (Math.random() % 1));
var option = options[random];
option.selected = true;
document.getElementById(fieldId).value = option.innerHTML; // You can use .value instead in both places
}
var values = {};
window.onload = function(e) {
document.onchange = function(e) { // Event Delegation: http://davidwalsh.name/event-delegate
var t = e.target;
if(t.tagName == "SELECT")
document.getElementById(t.id.replace("Select","Label")).value = t.children[t.selectedIndex].innerHTML;
}
document.oninput = function(e) {
var t = e.target;
if(t.tagName == "INPUT") {
if(values.hasOwnProperty(t.id))
var options = values[t.id];
else
var options = document.getElementById(t.id.replace("Label","Select")).children;
var currentValue = t.value;
for(i in options) {
if(options[i].innerHTML == currentValue) { // Can also use .value
options[i].selected = true;
break;
}
}
}
}
document.getElementById("randomize").onclick = function(e) {
randomizeSelect("leftSelect", "leftLabel");
randomizeSelect("rightSelect", "rightLabel");
}
}
<input type="text" id="leftLabel" value="Left 1">
<select id="leftSelect">
<option value="l1" selected>Left 1</option>
<option value="l2">Left 2</option>
<option value="l3">Left 3</option>
</select>
<input type="text" id="rightLabel" value="Right 1">
<select id="rightSelect">
<option value="r1" selected>Right 1</option>
<option value="r2">Right 2</option>
<option value="r3">Right 3</option>
</select>
<button id="randomize">RANDOMIZE</button>

This will create random number and click on random div menu:
$(function(){
$(".menu").click(function(){
alert("you clicked "+$(this).text());
});
});
function doSomthing(){
var rand=Math.floor((Math.random() * 5));
alert(rand+1);
var ele = $(".menu").get(rand);
$(ele).click();
}
fiddle example: link
Or you can use this example to put value in the menu, or wherever you want: link 2

just a concept how to make that
$('input').on('click',function(){
var randomnum = Math.floor(Math.random()*$('ul li').length);
alert($('ul li').eq(randomnum).text());
});
DEMO FIDDLE

Randomize Button added
see... ;) i hope this solve your problem!
https://jsfiddle.net/s59g8vdp/1/
Html :
<select id="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="s2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<a id="randomize" href="#">randomize</a>
Javascript :
var minNumber = 0;
var maxNumber = 3;
$("#randomize").click(function(){
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
});
function randomNumberFromRange(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);

How can I create a javascript to show and hide info according option value selected?

I'm trying to create a combobox to show moths, when I do click on january I only need to see div1 and febraury need to see div 2 like this:
January........
<div> It will show info when only january is selected</div>
Febraury........
<div> It will show info when only febraury is selected</div>
Here is my information:
<select id="month" name="month">
<option value="1">January</option>
<option value="2">Febraury</option>
<option value="3">March</option>
</select>
<-------ALL MY DIVS WILL BE HIDE -------------->
<div> It will show info when only january is selected</div>
<div> It will show info when only Febraury is selected</div>
<div> It will show info when only March is selected</div>
<----- It should show each div according option div is selected ----->
Here is my demo
http://jsfiddle.net/q2E5e/
Please somebody can help me with this?
I will really appreciate help

FIDDLE
You need to give id to your div, then use:
divJan.style.display = "block";
block will show your div, none will hide it.
You just need a function that will determine wich element is selected and an event to track the changes. Here's an example:
var cmbMonth = document.getElementById('month');
var divJan = document.getElementById('divJan');
var divFeb = document.getElementById('divFeb');
var divCoo = document.getElementById('divCoo');
cmbMonth.addEventListener('change', function (e) {
if (cmbMonth.value == 1) {
divJan.style.display = "block";
divFeb.style.display = "none";
divCoo.style.display = "none";
} else if (cmbMonth.value == 2) {
divJan.style.display = "none";
divFeb.style.display = "block";
divCoo.style.display = "none";
} else if (cmbMonth.value == 3) {
divJan.style.display = "none";
divFeb.style.display = "none";
divCoo.style.display = "block";
}
});

A jQuery solution using
$('#month').change()
and
$(some id).hide()
JSFiddle

At first, instead of hidden div elements with text, would be better if you create an array with text values, that should be shown after selecting appropriate values.
var divTextValues = [
"You selected January",
"You selected February",
"You selected March",
];
Second, for simplicity start values of dropdown list from 0.
<select id="month" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
Third, hide div element by default.
<div id="displayMonth" style="display:none;"></div>
And then add event handler.
var month = document.getElementById("month"),
displayMonth = document.getElementById("displayMonth");
month.addEventListener("change", function (e) {
var selected = this[this.selectedIndex];
if (selected.value > -1) {
displayMonth.textContent = divTextValues[selected.value];
displayMonth.style.display = "block";
} else {
displayMonth.style.display = "none";
}
});
Demonstration

Dropdownlist Onchange Show other Dropdownlist

My problem is I want to create a category selecting system with javascript but when I choose an option it displays all divs; it should show only one div.
For example : if value = emlak then show div id=emlak
JS
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value = 'emlak'){
document.getElementById("emlak").style.display = "block";
}
if(value = 'vasita'){
document.getElementById("vasita").style.display = "block";
}
}
HTML
<select name="kategori" onChange="getData(this);">
<option value="hat" onClick="">Hat</option>
<option value="emlak">Shirt</option>
<option value="vasita">Pants</option>
</select>
<select id="emlak" name="currentList" onChange=";" style="display:none;">
<option value="hat">Hat</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>
<select id="vasita" name="currentList" onChange="" style="display:none;">
<option value="hat">Otomobil</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>

Try this, Your problem is in if condition your are not using ==
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'emlak'){
document.getElementById("emlak").style.display = "block";
document.getElementById("vasita").style.display = "none";
}
if(value == 'vasita'){
document.getElementById("vasita").style.display = "block";
document.getElementById("emlak").style.display = "none";
}
}
Demo
Update Demo