am trying to select a multi select combo box. There i have to customize the property that when mouse over a value the color has to change. I tried few steps i know nut its not working. Suggest me the way how should i handle it. Here is the code.
<html>
<head>
<style type="text/css" >
</style>
<script type="text/javascript">
var a="hidden";
function doset()
{
if(a=="hidden")
a="visible";
else
a="hidden";
document.getElementById("myitems").style.visibility = a;
}
function dochange(a)
{
document.getElementById(a).style.background-color= 0xff00ff;
}
</script>
</head>
<body>
<label>ajay</label>
<input type=button value="v" onClick="doset(); return false;"/>
<div id=myitems style='visibility:hidden'>
<select multiple="multiple" >
<option id= prav1 onMouseover="dochange(this.id); return true;">ajay</option>
<option id= prav2 onMouseover="dochange(this.id); return true;">musthafa</option>
<option id= prav3 onMouseover="dochange(this.id); return true;">praveen</option>
<option id= prav4 onMouseover="dochange(this.id); return true;">shruthy</option>
<option id= prav5 onMouseover="dochange(this.id); return true;">vasanth sir</option>
</select>
</div>
</body>
</html>
It is backgroundColor instead of background-color
document.getElementById(a).style.backgroundColor= "#ff00ff";
SEE A WORKING DEMO
document.getElementById(a).style.background= "#ff00ff";
function dochange(a)
{
document.getElementById(a).style.backgroundColor = "#ff00ff";
}
"document.getElementById(a).style.background-color" is wrong
Have to be: "document.getElementById(a).style.backgroundColor"
Related
I want it so that when the DropDown List element is selected, I am able to grab it's value and set the input text, or even a DIV text, or even a label text to the value that was selected. Why doesn't it work? What am I missing?
jsfiddle: https://jsfiddle.net/fob6kp6k/
HTML:
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
JS/JQ:
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
whole thing:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
<input id="hiddenControl" runat="server" />
</body>
</html>
Your code has an extra ) in the line where you are setting the value. You need to update from
document.getElementById("hiddenControl").value = $("#bonus option:selected").text());
to
document.getElementById("hiddenControl").value = $("#bonus option:selected").text();
However, as you are using jquery, you should update it further to following
$("#hiddenControl").val($("#bonus option:selected").text());
For reference - http://plnkr.co/edit/3paUZ4wT4GZwZFuCL7Bj?p=preview
You can also make the below changes to make it working
$('#bonus').change(function () {
var text = $("#bonus").find(":selected").text();
$("#hiddenControl").val(text);
});
I have two dropdown menus named date and time respectively. I want to get the
text from the option tag when I click a button, but the javascript function does not seem to work. I 've found similar questions (and answers) about this but nothing worked. The code is below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var index = document.getElementById("date").selectedIndex;
var date = document.getElementById("date").options[index].text;
window.alert("You selected: " + date);
}
</script>
</head>
<body>
<select name="date">
<option value="1">date 1</option>
.....
</select>
<select name="time">
<option value="1">time 1</option>
.....
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
You're selecting the element by id but you didn't assign the id anywhere.
You need to add the correct id to the item:
<select id="date" name="date">
....
<select id="time" name="time">
Or you could select the items by name:
var index = document.getElementsByName("date")[0].selectedIndex;
Note: getElementsByName returns an array, thats why the [0] was added to select the first item that has that name.
Change code to
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var e = document.getElementById("date");
var strUser = e.options[e.selectedIndex].value;
window.alert("You selected: " + strUser);
}
</script>
</head>
<body>
<select name="date" id="date">
<option value="1">date 1</option>
..
</select>
<select name="time">
..
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
Try this:
function collectData() {
var ddl = document.getElementById("dateSelect");
var text = ddl.options[ddl.selectedIndex].text;
window.alert("You selected: " + text);
}
<select id="dateSelect" name="date">
<option value="1">date 1</option>
<option value="2">date 2</option>
<option value="3">date 3</option>
</select>
<button type="button" onclick="collectData()">Get data</button>
Here a CodePen
you are using getElementById('date').so add id attribute to select element.
So I'm pretty baffled with this issue I have here. I'm almost certain this code is correct yet the list box that I want to appear is not showing up at all after something is selected from the first drop down box. Here is what I have going for the code now
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function view_private_user_list(){
var i = document.status.private_users.options[document.status.private_users.selectedIndex].value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="visible";
}
}
</script>
</head>
<body>
<div id="show_private_option">
<select id="private_users" onChange="view_private_user_list()">
<option value="0" SELECTED>Select user....</option>
<option value="1">Vincent</option>
</select>
<div id="private_select_now" style="visibility:hidden">
<select size="3">
<option value="">{#template_dlg.select}...</option>
<option value="SOOOOLDmax.htm">SOOOOLDmax</option>
<option value="mike.htm">tester</option>
</select>
</div>
</div>
</body>
</html>
This fiddle should work:
http://jsfiddle.net/3XENR/1/
I think the way you're trying to find out the current value of the dropdown doesn't quite work.
Try this version of the function instead.
function view_private_user_list(){
var selectEl = document.getElementById('private_users');
var i = selectEl.value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="hidden";
}
}
Try:
document.getElementById('private_select_now').style.display ="block";
and
document.getElementById('private_select_now').style.display="none";
instead
instead of visibility, use display
<script type="text/javascript">
function view_private_user_list(){
var i = document.getElementById('private_users').selectedIndex.value
if(i == 1){
document.getElementById('private_select_now').style.display="block";
} else{
document.getElementById('private_select_now').style.display="none";
}
}
</script>
I want to store a string locally so when the user reloads the page it saves what was last there.
I looked at this and tried to implement it.
I had this code which basicllay has a button and a dropdown list of colors to change the background.
When I close and reopen the doc I want it to be the color that I saved.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<form>
<script language="JavaScript">
<!--
function inputForm(){
var color = document.getElementById("color");
var outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
//-->
</script>
</body>
</html>
I made this code to do that but it didn't work
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="storeColor()">
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<input type="button" onClick="storeColor()" value="save color"/>
<script>
var outputContents;
function inputForm(){
var color = document.getElementById("color");
outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
function storeColor(){
// Store
localStorage.color = outputContents;
// Retrieve
document.body.style.backgroundColor = outputContents;
}
</script>
<form>
</body>
</html>
Local storage in JavaScript is uses (key, value) pairs of strings so if you wanted to save the value This is my test value. you would need to give it a key that you can get it from later, for example myTestValue.
So in code this would be
// set the value in window.localStorage
window.localStorage.setItem('myTestValue', 'This is my test value.')
// get the value from window.localStorage
window.localStorage.getItem('myTestValue')
Here is some more information: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You code is almost complete. You only need to apply background color on window load. I added one more function applyColor:
function applyColor(color) {
color = color || localStorage.color;
document.body.style.backgroundColor = color;
// Select corresponding option in selectbox
var select = document.getElementById("color");
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].value == color) {
select.options[i].selected = true;
return;
}
}
}
applyColor();
Also note that when page is loaded we should also select the option from selectbox corresponding to currently saved color.
Demo: http://jsfiddle.net/sd2Cx/
I need to make javascript code to swap images with option change.
Here is the code:
<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?
Setting up a mapping from your color options to the URLs might work, I think.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
Use another attribute on the option:
<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
Then get that attribute with getAttribute("rel")
<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">
You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.
CSS:
.red
{
background: url(red.gif) no-repeat;
}
HTML/JS:
<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">
This works for me.
<HTML>
<head>
<TITLE>Image Select Test</TITLE>
<script type="text/javascript" language='javascript'>
function flip() {
myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
}
</script>
</head>
<body>
<form>
Select an image:<br/>
<select id="ColorSelect" onchange="javascript:flip();">
<option url="images/0.png" value='Zero'>Zero</option>
<option url="images/1.png" value='One'>One</option>
<option url="images/2.png" value='Two'>Two</option>
<option url="images/3.png" value='Three'>Three</option>
<option url="images/4.png" value='Four'>Four</option>
</select>
</form>
<img src="images/unknown.png" id="myimage"/>
</body>
<script type="text/javascript" language='javascript'>
// place this after <body> to run it after body has loaded.
var myimage = document.getElementById('myimage');
var ColorSelect= document.getElementById('ColorSelect');
</script>
</HTML>
ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.
It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');