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.
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>
<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
</select>
How to trigger an alert on clicking bootstrap select live search input box ?
I tried with this, but its not working.
$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
alert("live searching ..");
})
Any suggestions would be appreciated.
Thanks in advance.
Here is probably the correct Solution (probably):
Since the select-Tag is replace later(after the onload Event), so to be on the save side, so that it can be found "better" with a timeout.
I replace the alert call to a config.info call.
setTimeout(function(){
var newBox = $("#selectControl").get(0).parentNode;
$(newBox).find("input").on("click",function(){
console.info("live searching ..");
});
}, 1000);
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
<div class="container">
<div>
<select class="selectpicker" data-live-search="true" id="selectControl">
<option data-tokens="Option 1">Option 1</option>
<option data-tokens="Option 2">Option 2</option>
<option data-tokens="Option 3">Option 3</option>
<option data-tokens="Option 4">Option 4</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
</script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
</script>
</body>
btw.: details to te Control can be found in this Github, found it while google-ing
I used .style.backgroundColor = '#58eaa1' to change the background color of the dropdown list () but it changes the appearance of the dropdown list to 3d. I want the same appearance as in 'initial appearance' even after the change of background color.
Sample code (html)
function changecolor(){
var dropdownlist = document.getElementById('dropdownlist');
dropdownlist.style.backgroundColor = 'green';
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" onchange="changecolor()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
try it , i think this will solve your problem
<select style="background:#58eaa1 !important; border:1px solid #abadb3">
<option>hdd</option>
</select>
Here a working link: http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview
here the html:
// Code goes here
var changeBack = function (){
// select your select tag
var selectStatus = document.getElementById("selectStatus");
// get the number of the option currently selected
var optionSelected = selectStatus.selectedIndex;
// set his background-color to the class'name of the option
selectStatus.style.background = selectStatus.options[optionSelected].className;
//Then color each option in her proper class
for (var option in selectStatus.options){
selectStatus.options[option].style.background = selectStatus.options[option].className;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<!-- Just to color the select on page load -->
<body onload="changeBack()">
<tr>
<td>
<form action="">
<select id="selectStatus" onclick="changeBack()" name="statusApproved">
<!--Set your options a class with the color you want-->
<option class="green" value="Current:Approved">Current: Approved</option>
<option class="red" value="ChangeTo:Rejected">Change to: Rejected</option>
</select>
</form>
</td>
</tr>
</body>
</html>
var buton=document.getElementById("dropdownlist");
var allchar="0123456789ABCDEF";
buton.addEventListener("change",myFun,true);
function myFun(){
var randcol= "";
for(var i=0; i<6; i++){
randcol += allchar[Math.floor(Math.random()*16)];
}
document.getElementById("dropdownlist").style.background="#"+randcol;
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" >
<option class="col_color">0</option>
<option class="col_color">1</option>
<option class="col_color">2</option>
<option class="col_color">3</option>
<option class="col_color">4</option>
<option class="col_color">5</option>
</select>
</div>
</body>
</html>
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>
I have two selects
<select name="firstselect" id="firstselect">
<option value="optionOne">optionOne</option>
<option value="optionTwo">optionTwo</option>
</select>
<select name="secondselect" id="secondselect">
<option value="secondOptionOne">secondOptionOne</option>
<option value="secondOptionTwo">secondOptionTwo</option>
<option value="secondOptionThree">secondOptionThree</option>
<option value="secondOptionFour">secondOptionFour</option>
<option value="secondOptionFive">secondOptionFive</option>
</select>
I want the options in the secondselect to change based on the option the user chooses in the first select. How can I do this either in Javascript or PHP?
I have had the same problem as you. The following javascript, written inside the space corresponding to the <head> tag, could be useful if both lists have the same elements and the first element of the list "firstselect" is related to the first one of the list "secondselect", the second element of the list "firstselect" is related to the second one of the list "secondselect" and so on.
<script language="javascript" type="text/javascript">
// <!CDATA[
function Select1_onclick() {
var SelectList1 = document.getElementById('firstselect');
var SelectList2 = document.getElementById('secondselect');
SelectL2.selectedIndex = LSelectL1.selectedIndex;
// ]]>
</script>
You also should modify the <select> tag for the list "firstselect" to include the above script in this way:
<select name="firstselect" id="firstselect" onclick="Select1_onclick()">
If you pretend to make a different options choice, you could use a switch-case structure (see a example here).
I found a nice solution to this here:
http://www.webdeveloper.com/forum/showthread.php?91848-How-do-I-make-one-lt-select-gt-list-dependent-on-the-selection-made-in-another
It's not my code but I hope it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];
function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
</script>
</head>
<body onload="Box2(0);">
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2">
</select>
</fieldset>
</form>
</body>
</html>