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.
Related
I got this problem with a wordpress plugin I’m working on. I tried using this on a local html page, and it works properly. Now, when I tried on a server with wordpress, I can see that it initializes, but after some miliseconds it gets replaced by the vanilla select menu. I don’t know what could be causing this. What do you fellas think?
edit: I'd also like to add that the way I see select2 works is that, once the document is ready, it injects its own select element into the document. This seems to happen in my page, but after the page has finished loading the element is gone.
The first menu is how it’s looking with select2. That’s fine. The second menu on the picture is how it ends up looking - a normal select element.
https://i.imgur.com/W2ALH8T.png And this is how the script looks like. Nothing complicated, just need to see it run properly first.
This snippet shows that the code is working properly, however i cannot seem to replicate what is happening on the site.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.country-switcher').select2();
});
</script>
<span class="widgettitle">SHIP TO:</span>
<div class="wc-price-based-country wc-price-based-country-refresh-area refreshed" data-area="widget" data-id="39ddbdcf9476789f65bca6d5b7cda228" data-options="{"instance":{"other_countries_text":"Other countries","title":"SHIP TO:","remove_other_countries":"1"},"id":"wcpbc_country_selector"}">
<select class="wcpbc-country-switcher country-switcher">
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU" selected="selected">Australia</option>
</select>
</div>
Any help on this issue would be greatly appreciated. Thanks, y’all!
I have a simple jquery select issue using Query Mobile that I have googled for and the answers I've found just aren't working. I have an html select as follows:
<select name=x id=Sel>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
</select>
I read the actual value from a database using an ajax call and then execute the line:
$("#Sel").val(result);
The screen still shows 1 as selected. I have verified that immediately before this line that result is equal to 2.
I know I've seen this somewhere, just can't remember where.
You need to refresh the jQM selectmenu widget after changing the value:
$("#Sel").val(2).selectmenu("refresh");
DEMO
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/
I cannot get onclick="location.href='link.html'" to load a new page in Safari (5.0.4).
I am building a drop-down navigation menu using the <select> and <option> HTML tags. I am using the onclick handler to load a new page after a menu-item is clicked, but nothing happens in Safari. (I have successfully tested in FF & Opera.) I know that there are many onclick bugs in Safari, but I haven't found any solutions that address this specific issue.
You can see a sample of my code below:
<select>
<option onclick="location.href='unit_01.htm'">Unit 1</option>
</select>
and
<select>
<option onclick="location.href='#5.2'">Bookmark 2</option>
</select>
I do not (and prefer not) to have any javascript embedded in the head section of my HTML. I am developing the page for someone who does not know how to use javascript--so the simpler the code, the better.)
What JavaScript code would make the menu-item clickable in all-browsers? (Please verify compatibility with IE.)
Try this:
onclick="javascript:location.href='http://www.uol.com.br/'"
Worked fine for me in Firefox, Chrome and IE (wow!!)
Use jQuery....I know you say you're trying to teach someone javascript, but teach him a cleaner technique... for instance, I could:
<select id="navigation">
<option value="unit_01.htm">Unit 1</option>
<option value="#5.2">Bookmark 2</option>
</select>
And with a little jQuery, you could do:
$("#navigation").change(function()
{
document.location.href = $(this).val();
});
Unobtrusive, and with clean separation of logic and UI.
Give this a go:
<option onclick="parent.location='#5.2'">Bookmark 2</option>
You can try this:
<a href="link.html">
<input type="button" value="Visit Page" />
</a>
This will create button inside a link and it works on any browser
I had the same error. Make sure you don't have any <input>, <select>, etc. name="location".
try
<select onchange="location=this.value">
<option value="unit_01.htm">Unit 1</option>
<option value="#5.2" selected >Bookmark 2</option>
</select>
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.