We Keep Coding

Loading local storage items for multiple dropdown lists

I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});

Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.

Get value on select only when clicked

I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you

You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});

php if checkbox checked <select> list appear

I have the follow problem guys, i have create a simple page with a ckeckbox, and i want when the checkbox is checked a (list) appearing and if not checked list2 appearing,without using sumbit
<body>
<input type="checkbox1" name="ckeck">
<?php if checkbox1 is ckecked { ?>
<select name="list" size="1">
<option value="0">0</option>
<option value="1">1</option>
</select>
<?php } else { ?>
<select name="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
<?php } ?>
</body>
I hope the code help more....

If you want the list to display without using a submit (meaning it appears when you click the checkbox) you need to use Client-Side scripting in a language such as Javascript, instead of PHP. PHP can only control the output that is sent to the client, once it is on the client being displayed in the browser you need a client-side language to make changes.
I highly recommend you use a library to do this as that will take care of a lot of stuff that you would otherwise need to do manually. If you would use the very popular and widespread JQuery library your code could look like
<html >
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#list").hide();
$("#ckeck").change(function() {
if($(this).is(":checked")) {
$("#list").show();
$("#list2").hide();
}
else
{
$("#list").hide();
$("#list2").show();
}
});
});
</script>
<input type="checkbox" name="ckeck" id="ckeck">
<select name="list" id="list" size="1">
<option value="0">0</option>
<option value="1">1</option>
</select>
<select name="list2" id="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
</body>
</html>

PHP does not have access to the DOM; you'll need JavaScript for that. If you must use PHP to react to a checkbox, then you'll want to look into using AJAX. Basically you'll use JavaScript (ideally jQuery) to react to the immediate checkbox event, which will use AJAX to communicate with your PHP script. Your PHP script will return some sort of data. The data could be JSON containing the list data (I recommend this one), could be raw JavaScript code to be executed, or it could simply return a boolean that determines whether the list will display or not. Those are just some ideas.
If it's not a security issue, you could just move all the PHP logic to the client-side and do everything in JavaScript. You'll probably have a better user experience and there's potential for less server strain.
tl;dr: Use JS instead. Otherwise use JS to handle checkbox events, AJAX against PHP script, PHP generates data, JS interprets result.

Try using .toogle() like:
$('#checkbox1').change(function() {
$("select[name='list']").toggle(this.checked);
$("select[name='list2']").toggle(!this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check" id="checkbox1">
<select name="list" size="1" style="display:none">
<option value="0">0</option>
<option value="1">1</option>
</select>
<select name="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
See it in action here: http://jsfiddle.net/mk02qmjh/1/

Bootstrap Selectpicker problems

I'm trying to use this selectpicker for form selects and options, but can't get it to work.
I've added the following scripts and css as specified:
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
html for the 1st greyed out select in the search bar:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
Any ideas appreciated.

Please be sure that you included all the required files or You may have to rearrange the code like :
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
You need to include the js first then call the the plugin. Check this fiddle, its working for me : http://jsfiddle.net/tejashsoni111/RUAS4/

.selectpicker() is a function defined under bootstrap-select lib and not in core bootstrap library,hence you need to include that library as well
//silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js
//silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css
HTML:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
JQUERY CODE:
$('.selectpicker').selectpicker();
Here is a Live Demo of select picker function :
http://jsfiddle.net/dreamweiver/2a9xp/13/
Happy Coding :)

In case anyone using Rails is experiencing a similar problem - the issue was arising from the existence of the precompiled assets for the AWS deployment that were lingering in my local environment.
Deleting YourRailsApp/public/assets solved the issue for me.

select onchange firing twice in ie7

this is really wierd, not sure why this is happening but my onchange is firing twice. any help/ideas is greatly appreciated...
<select id="ddlGender" onchange="myfunc()">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>

Your java script code should be in java script file loaded in your head:
$(document).ready(function(){
$("#ddlGender").unbind('click').change(myfunc);
var myfunc = function (e)
{
// Do something important....
}
});
If I remember correctly you need to unbind click event from select in IE in order to avoid firing event twice.
And your html should not have onchange any more:
<select id="ddlGender">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>