I am looking for help in putting a cookie into this script so the browser remembers the background image selected when the browser is closed or changed page. Any help would be much appreciated!
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
<body id="shelf">
<select id="themes" onChange="changeTheme()" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
It looks like the only piece you are missing is the setting and getting of the cookie. Here is a post about setting and getting cookies using both jquery and javascript.
This is jquery but it gets the job done.
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--download jquery.cookie from here http://plugins.jquery.com/cookie -->
<script type="text/javascript" src="images/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$("#themes").change(function() {
theme = $(this).val();
$.cookie("backgroundImage", theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
});
});
</script>
</head>
<body id="shelf">
<!--<select id="themes" onChange="changeTheme()" name="ChangeBG">-->
<select id="themes" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
</body>
</html>
Related
Getting console error:
SyntaxError: Unexpected end of script.
Code here:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$("#cars2").select2();
});
</script>
<script>
<!--Need help here I think.-->
function myFunction(){
var x = document.getElementById("myDIV");
var y = this.value;
switch (y) {
case '1':
x.innerHTML = "<p>Volvo dude</p>";
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
</script>
<style>
select {
width: 150px;
}
</style>
</head>
<body>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
</body>
</html>
I can't use the snippet editor 'cause all I have is an iPad.
JSFiddle here: https://jsfiddle.net/CoolBuys1290/59qmbt0f/19/
Please help me update the div text based on selecting an option.
Updated braces.
Thanks.
You were missing the correct way to pick the current selected option that, for example in the snippet I included here, I've got using the css selector select#cars2 option:selected and through the jQuery object, because your code was based on it, instead of the vanilla document.querySelector
$(document).ready(function() {
$("#cars2").select2();
});
function myFunction(event){
var x = document.getElementById("myDIV");
//here you are picking the selected option item
var y = $('select#cars2 option:selected').val();
switch (y) {
case '1':
x.innerHTML = "<p>Volvo dude</p>";
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
select {
width: 150px;
}
<script
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
The jQuery slogan is "write less, do more!" - and the following takes it up in a way. I have created an array captions that supplies the captions for the div and - if nothing was provided - switches it back to "Hello".
const x=document.getElementById("myDIV"), captions=[null,'Volvo dude!','Roy!'];
$(document).ready(function() {
$("#cars2").select2().change(ev=>x.textContent=captions[ev.target.value]||"Hello");
});
select {
width: 150px;
}
<script
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
I'm trying to display a piece of styled text below a dropdown using the change function, the problem is the option that triggers the change is the first option when the page loads, and because it's disabled (which it needs to be), there is no way to change to it
Instead, I'm wondering if there is an alternative to change that loads the function when the page loads
Just to be clear, the text should not be visible when any other value is selected from the dropdown
I'm also struggling with assigning a class name to the printed text, I have commented out what I thought should work
Days of numerous different code examples, and although I'm closer than a few days ago, I still can't figure out the proper way
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#reports').change(function() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
});
});
</script>
</body>
</html>
The desired result is have the "styled" text appear when the page loads, but disappear when any other option from the dropdown is selected
add onchange="hide()" to <select...> and add div with text in body and after change just hide it.
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports" onchange="hide()">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<div id="msg">"Choose Report From Menu"</div>
<script type="text/javascript">
function hide() {
msg.style.display='none';
};
</script>
</body>
</html>
If you're trying to execute that function one time when the page loads, try something like this:
$(document).ready(function () {
function reportsChange() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
}
$('#reports').change(function () {
reportsChange();
});
reportsChange();
});
This will execute the "reportsChange" function once when loading the page, and it will also be available for you to use whenever the on change event triggers.
I have a selectpicker multiselect dropdown. I'm not able to invoke 'onclick' when I select any option. But this works with the normal html multiple dropdown. How to make it work with selectpicker?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/js/bootstrap-select.min.js"></script>
</head>
<body>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" onclick="myFunction(this)">Volvo</option>
<option value="bmw" onclick="myFunction(this)">Bmw</option>
<option value="opel" onclick="myFunction(this)">Opel</option>
<option value="audi" onclick="myFunction(this)">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
<script type="text/javascript">
function myFunction(option) {
if (option.selected) {
alert(option.text);
}
}
</script>
</body>
</html>
I have changed the dropdownlist a bit below:
<select class="selectpicker" onchange="myFunction()" id="cars" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Then modified your myFunction below:
var oldarr = [];
var newarr = [];
function myFunction() {
if ($("#cars option:selected").length == 1) {
oldarr = [];
oldarr.push($("#cars option:selected").val());
alert($("#cars option:selected").val());
}
else {
newarr = [];
$("#cars option:selected").each(function(i){
newarr.push($(this).val());
});
newitem = $(newarr).not(oldarr).get();
if (newitem.length > 0) {
alert(newitem[0]);
oldarr.push(newitem[0]);
}
else {
oldarr = newarr;
}
}
}
Basically, the oldarr will store the previous list of selected items. Then we insert the latest list of selected items into newarr. Then we compare what is in the newarr but not in the oldarr. This way we can filter out only the latest clicked item. If the user deselects an item instead, we just assign the newarr to oldarr.
try this, use forEach to find selected option
var selectEl = document.querySelector('.selectpicker');
var options = document.querySelectorAll('.selectpicker option');
selectEl.addEventListener('change', function() {
options.forEach(function(option) {
if(option.selected) { alert(option.value); }
})
})
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
or use jQuery find :select
$('.selectpicker').change(function() {
var thisValue = $(this).find(':selected').attr('value') ;
alert(thisValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Hope help :)
I have used jQuery to do this. since you use select from bootstrap, it will ordered as list not as options, thats why it didnt worked for you
$(function() {
$('.selectpicker').on('change', function(){
var selected = $(this).find("option:selected").text();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" >Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
Hope this helps..!
I've tried multiple variations of importing jQuery, but nothing is working. When I run it, everything in the body shows up, but the jQuery function doesn't work.
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('select').on('change',function(){
var value=$(this).val();
var output='';
for(var i=1;i<=value;i++)
{
output+='<div>Your Text</div>';
}
$('#test').empty().append(output);
});
});
</script>
</head>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
<span id="test">
</span>
</body>
</html>
What can I do to fix it?
Here are the errors I'm getting in my console:
The resource from
“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.mi%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9n.js”
was blocked due to MIME type mismatch (X-Content-Type-Options:
nosniff). testy.html
ReferenceError: $ is not defined[Learn More]
The character encoding of the HTML document was not declared. The
document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or
in the transfer protocol.
Do below steps:-
Copy the jquery library code (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js) code and save it with the same name in your current working directory (jquery.min.js):-
Now use this code:-
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"><!-- this is for removing character encoding error-->
<script type='text/javascript' src="jquery.min.js"></script><!-- see the change here -->
</head>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
<span id="test">
</span>
</body>
</html>
<script type = "text/javascript">
$(document).ready(function(){
$('select').on('change',function(){
var value=$(this).val();
var output='';
for(var i=1;i<=value;i++)
{
output+='<div>Your Text</div>';
}
$('#test').html(output); //html will do everything(removing and then adding)
});
});
</script>
Note:- You can once try like this:-
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I have a question about my project.
We want to let the user select a value in a select form and then import that value in a sparql Query. We're are not using php or something like that. the value should be in the sparql query.This is what i've tried:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" id="sgvzlr_script" src="../sgvizler.js"></script>
<script type="text/javascript">
sgvizler
.defaultEndpointURL("http://lod.xdams.org/sparql#")
.prefix('default','http://cdec.opendams.org/lod/shoah/')
.prefix('persecution','http://cdec.opendams.org/lod/shoah/persecution/');
//// Leave this as is. Ready, steady, go!
$(document).ready(sgvizler.containerDrawAll);
</script>
<h1>TEST</h1>
<html>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<h2>gTable</h2>
<div id="sgvzl_example19"
data-sgvizler-query="SELECT *
WHERE
{ persecution:'value' ?b ?c
}
LIMIT 10"
data-sgvizler-chart="google.visualization.Table"
data-sgvizler-log="2"
style="width:800px; height:600px;"
></div>
Thanks in advance,
Jelle