The following is a selection element:
<html>
<head>
<title> </title>
</head>
<body>
<select class = 'form-control'>
<option>Select an Option:</option>
<option>Electrical</option>
<option>Mechanical</option>
<option>Structural</option>
<option>Others</option>
</select>
</body>
</html>
My desired result is that: when I click an option in the select tag, a table would pop-up. How can I do that?
Related
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 have 2 select boxes with ids dd1,dd2. While selecting a value from select box 1 the value in seelct box 2 should be replaced in jquery. The following is not worked. What mistake I am doing here?
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script src="jquery-1.12.0.min.js"></script>
<head>
<script>
function change(){
alert("Hi");
$('dd2').children().remove().end().append('<option selected value="5">5</option>') ;
}
</script>
</head>
<body>
<select id="dd1" onchange=change()>
<option>1<option>
<option>2<option>
<option>3<option>
<option>4<option>
</select>
<select id="dd2">
<option>A<option>
<option>B<option>
<option>C<option>
<option>D<option>
</select>
</body>
</html>
You need to add # in your Jquery selector for an ID: $('#dd2')...
Here is a working fiddle: https://jsfiddle.net/p5g3p0t5/
I would like to obtain the original selected value of a <select> element as it was written by the initial HTML and defined by selected="selected". For instance, the original value of mySel is 2 no matter what the user selects. Or in other words, I would like to get the default value of the <select> element similarly as I am doing with the below <input> element. Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#click').click(function(){
console.log($("#myInput").val(),$("#myInput").attr('value'));
console.log($("#mySel").val(),$("#mySel").attr('value'),$('#mySel option:selected').val());
});
});
</script>
</head>
<body>
<button id="click">Click</button>
<input type="text" value="Default Value" id="myInput" name="myInput" class="valid">
<select id="mySel" name="mySel">
<option value="1">Value 1</option>
<option value="2" selected="selected">Value 2</option>
<option value="3">Value 3</option>
</select>
</body>
</html>
Since this is specified as an attribute, you can select that:
$('#mySel option[selected]');
or even
$('#mySel [selected]');
This will select the original selected value no matter what the user has changed it to.
http://jsfiddle.net/mblase75/szT4w/
Use to get select option of a select element like this:
$("#mySel option[selected]").val();
It will do the magic :)
I seem to get this null or not an object error over and over when I try to code in javascript. This is an simple example where I'm just trying to make a window pop up that displays the name of the option. How can I avoid getting this error when I'm coding?
The code returns this error in Internet Explorer:
Error: 'document.forms.0.questions' is null or not an object
<!DOCTYPE html>
<!-- HTML5 style -->
<head>
<title>Challenge Question</title>
<script type="text/javascript">
/* <![CDATA[ */
window.alert(document.forms[0].questions.pet.name);
/* ]]> */
</script>
</head>
<body>
<form action="get" >
<select name="questions">
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
</body>
</html>
The element must be added to the DOM first, then you can access it. Now you're trying to access an element that does not yet exist :
<!DOCTYPE html>
<html>
<head>
<title>Challenge Question</title>
</head>
<body>
<form action="get">
<select name="questions">
<!-- Element is added here -->
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
<script type="text/javascript">
/* and can be accessed here, after it's added */
console.log(document.forms[0].questions.options['pet']);
</script>
</body>
</html>
FIDDLE
I have tested the code. It works fine.
<script type="text/javascript">
function func1()
{
var index = document.getElementById("pet").selectedIndex;
var value = document.getElementById("pet").options[index].text;
alert(value);
}
<form action="get">
<select name="questions" id="pet" onchange="if (this.selectedIndex) func1();">
<!-- Element is added here -->
<option value="pet" name="pet" >What is your pet's name?</option>
<option value="pet" name="pet" >What is your pet's 1?</option>
</select>
</form>
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>