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 :)
Related
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?
I want to use a form selector as shown, and depending on the option selected, a different output. Simple, yet I am not getting it to work. Here is what I have.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
if ("#1") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">1</td><td width="64">80</td><td width="93">32</td></tr></tbody></table>");
}
if ("#2") {
$("#display").html("<table width="221"><tbody><tr class="su-even"><td width="64"><strong>Level</strong></td><td width="64"><strong>Damage</strong></td><td width="93"><strong>Crown Tower Damage</strong></td></tr><tr><td width="64">2</td><td width="64">88</td><td width="93">36</td></tr></tbody></table>");
}
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level">
<option id="1">1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
</html>
There were a couple issues here.
First of all, "#1" and "#2" are always going to == true, since they are strings.
Second, the code that changes the text only happens once, on page load. There is nothing telling it to update after the menu is changed.
Third, on the lines starting with $("#display").html...., you had what should have been a very long string, but you broke it up by using double quotes every time. You need to switch between single and double quotes. If I say, "class="potato">", it sees "class=" as one string, and ">" as another, but it doesn't know what to do with potato. You need to use single quotes, like "class='potato'>" or 'class="potato">'.
This is the fixed code:
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function changeText(){
if ($("#level option:selected").text() == "1") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>1</td><td width='64'>80</td><td width='93'>32</td></tr></tbody></table>");
}
if ($("#level option:selected").text() == "2") {
$("#display").html("<table width='221'><tbody><tr class='su-even'><td width='64'><strong>Level</strong></td><td width='64'><strong>Damage</strong></td><td width='93'><strong>Crown Tower Damage</strong></td></tr><tr><td width='64'>2</td><td width='64'>88</td><td width='93'>36</td></tr></tbody></table>");
}
}
$(document).ready(function(){
changeText();
});
</script>
</head>
<body>
<div>
<form id="option">
<label for="level">Level at a glance:</label>
<select name="level" id="level" onchange="changeText()">
<option id="1" >1</option>
<option id="2">2</option>
</select>
</form>
<div id="display">
</div>
</div>
</body>
Your javascript conditions are executed once, when the document is ready.
You have to add an event, when the select value change !
Add some values in your option elements ( <option value="1">1</option> )
$(document).ready(function(){
// Set event
$("#level").change(function(){
if ($(this).val() === "1") {
$("#display").html(...);
} else {
$("#display").html(...);
}
}
// Call event when document loaded
$("#level").change();
});
I have a requirement that based on the drop down selection I should fill data for the next input tag.
For example in drop down box, if I give values like NETWORK1, NETWORK2, NETWORK3. If I select NETWORK1 from dropdown textbox should fill with 127.0.0.1, if it is NETWORK2 it will be 127.0.0.2 and so on.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body> <pre>
UserName : <input type="text" name=uname>
Password : <input type="password" name=upwd>
Confirm Password : <input type="password" name=cpwd>
Network : <select>
<option value="N1">Network1</option>
<option value="N2">Network2</option>
<option value="N3">Network3</option>
</select>
IP address : <input type="text" name=ipaddress>
</pre>
</body>
</html>
This would be a lot cleaner with JQuery but in plain javascript you can do it like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body> <pre>
UserName : <input type="text" name=uname>
Password : <input type="password" name=upwd>
Confirm Password : <input type="password" name=cpwd>
Network : <select id="network" onchange="setIP(this)">
<option value="N1">Network1</option>
<option value="N2">Network2</option>
<option value="N3">Network3</option>
</select>
IP address : <input type="text" name=ipaddress id=ipaddress>
</pre>
<script language="javascript">
function setIP(networkSelect) {
var val;
switch (networkSelect.options[networkSelect.selectedIndex].value) {
case 'N1': val = '127.0.0.1'; break;
case 'N2': val = '127.0.0.2'; break;
case 'N3': val = '127.0.0.3'; break;
}
document.getElementById('ipaddress').value = val;
}
setIP(document.getElementById('network'));
</script>
</body>
</html>
you can do like this gives addess in the value of option like this
<select id="network">
<option value="127.0.0.1">Network1</option>
<option value="127.0.0.2">Network2</option>
<option value="127.0.0.3">Network3</option>
</select>
IP address :
and select value as
<script language="javascript">
$("#network").change(function(){
var temp = $("#network option:selected").val();
$("#ipAddress").val(temp);
});
</script>
and add header file of jquery
I'm trying to have Select 1 update Select 2 and then have Select 2 fire.
Select 2 only fires when controlled directly.. I'm stumped!!
Code:
<!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=utf-8" />
<title>Select Firing</title>
</head>
<body>
<p>Select 1 updates Select 2, but select 2's alert does not fire</p>
<select id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<p>Select 2 only fires alert when controlled directly</p>
<div>
<select id="select2" onchange="alert(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</body>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(function() { //run on document.ready
$("#select1").change(function() { //this occurs when select 1 changes
$("#select2").val($(this).val());
});
});
});
</script>
</html>
Thank you!
$("#select1").change(function() {
$("#select2").val($(this).val()).trigger('change');
//or
$("#select2").val($(this).val()).change();
});
Is this what you need? Or did i miss something?
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>