This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to change “selected” value in combobox using JavaScript?
So here's my code"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
How to change default selection (from topics to posts)?
I can NOT modify this part of HTML code in any way, but I can add a script anywhere inside the head.
Try it (have not tested):
var doprdown = document.getElementsByName('show_as')[0];
for(var i = 0; i < dropdown.options.length; i++){
if(dropdown.options[i].value == "posts")
dropdown.selectedIndex = i;
}
Or jQuery:
$("select[name='show_as'] > option[value=posts]").attr('selected', true);
Try using,
Jquery Code:
<script language="javascript" type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('#show_as').val('posts');
});
</script>
Html code:
here i have specified an id in-order to select the select box called "show_as"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as" id="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
Related
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
I am very new at HTML/CSS/JavaScript, and I was wondering how I would use a variable that I declared in HTML, and do something with it in JavaScript. In the code below, I created a selection box, and I want to output a message using something along the lines of "if(...) then alert("")". How would I do the equivalent of
if(value == "chrome") {alert("you are using Chrome");}
"Value" is in HTML, but the comparison would be done in JS. Here is the code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello, Internet!</title>
</head>
<body>
<h1>
<p>Webstorm</p>
</h1>
<h2>
<p>Browser ID</p>
</h2>
<h3>
<p>Select which browser this is running on:</p>
<select>
<option>[Select Browser]</option>
<option value = "chrome">Chrome</option>
<!--How would I use "value"? -->
<option value = "firefox">Firefox</option>
<option value = "IE">InternetExplorer</option>
</select>
</h3>
</body>
</html>
You can always assign the option with an id and then using javascript to read the selected value as a variable
<select id="example">
<option>[Select Browser]</option>
<option value = "chrome">Chrome</option>
<!--How would I use "value"? -->
<option value = "firefox">Firefox</option>
<option value = "IE">InternetExplorer</option>
</select>
Your Javascript
var x = document.getElementById("example").selectedIndex;
console.log(x);
You can replace the line of <select> with the following:
<select onchange="if(this.options[this.selectedIndex].value == 'chrome') {alert('you are using Chrome?');} " >
It will only alert "you are using Chrome?" when the chrome is selected. Is this what you want?
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
I have an HTML element like this:
<td>
<select>
<option value="Polygon 47">Polygon 47</option>
<option value="Polygon 49">Polygon 49</option>
</select>
</td>
How can I access the currently selected value with JavaScript?
I solved it by using getElementsByTagName.
var e = cell.getElementsByTagName("select")[0];
var myValue = e.options[e.selectedIndex].value);
Solution:
<select id="shape">
<option value="Polygon 47">Polygon 47</option>
<option value="Polygon 49">Polygon 49</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$('#shape').change(function(){
var shapeId = document.getElementById("shape");
var shapeChosen = shapeId.options[shapeId.selectedIndex].value;
//Now use 'shapeChosen' wherever you want. 'shapeChosen' will give you the selected item.
});
});
</script>
<select id="test">
<option value="Polygon 47">Polygon 47</option>
<option value="Polygon 49">Polygon 49</option>
</select>
$("#test").change(function() {alert($("#test option:selected").val())})
in my script, I have a select-field:
<select name="src[jumpMenu]" id="jumpMenu" onchange="ChangeImage(this.value,'preview');">
<option value="A">AStyle</option>
<option value="B">BStyle</option>
<option value="C">CStyle</option>
</select>
and I got this Javascript below:
<script language="Javascript" type="text/javascript">
<!--
function ChangeImage(newimage,imageid) {
if(document.getElementById(imageid).src != newimage)
document.getElementById(imageid).src = newimage;
}
// -->
</script>
and here is my problem:
I can't change the values because of the dependence for the other files (which I won't change).
Do you know any solution how to switch "A" to "img/src/A_top.png" for example and get it working with this script?
Thanks.
document.getElementById(imageid).src = "img/src/"+newimage+"_top.png";
Re-Edited:
I went over to W3schools and played around in there javascript editor window to see what was going on. Here is a shorter script.
<html>
<body>
<script type="text/javascript">
var eType = document.getElementById("Type")
</script>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
document.write(eType);
</script>
</body>
</html>
I did what ThiefMaster suggested on how to get the element by not using the .text or .value but as you can see if you run this code I still get a null at this step of the process. From what I can see and many suggestions I am doing this correctly. I know I must be missing something. Can anyone see it?
You're trying to get the element before you've actually put it on the page. Fix the order, and don't use document.write.
<html>
<body>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
var eType = document.getElementById("Type")
document.body.appendChild(document.createTextNode(eType));
</script>
</body>
</html>
Your second code block is almost correct; you need to use the select element itself instead of its (non-existent) value:
var elem = document.getElementById("Type");
var type = elem.options[elem.selectedIndex].value;
Demo: http://jsfiddle.net/ThiefMaster/nw3nN/
If you had jQuery available you could drastically reduce the amount of code necessary:
var type = $('#Type').val();
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>