I have a dropdown list with 2 options:
<select name="list" size="1">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
And i want to set <span id=tag></span> to display different text depending on which option is highlighted in the dropdown. How can I do this?
Well, the question is pretty vague but in general you would do something like this:
Html:
<select id="mySelect" name="list" size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span id="tag"></span>
Javascript:
//cache the select and span elements
var mySelect = document.getElementById("mySelect"),
tag = document.getElementById("tag");
//when it changes
mySelect.onchange = function() {
//change the tag innerHTML checking the selected value of the select
tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}
You could change the ternary operator (? :) for a few if statements, if you need more conditions.
Notice that I've added an Id to the <select>. You can avoid the caching part if you want to get the span each time the select changes for some reason
<option value=one> it doesnt seem to work. Or am i doing something silly?
<option value="one">text</option> and then remember to change the value in the onchange method. It should work, it's not restricted to numbersYou can do it with an onchange event handler on your <select>:
<select name="list" id="list">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
<span id="tag"></span>
<script>
// Get references to the objects you need (<select> and <span>)
var list = document.getElementById('list');
var tag = document.getElementById('tag');
// When the list value changes, set the innerHTML of the <span>
list.onchange = function() {
tag.innerHTML = this.value;
};
</script>
Notice in the above that I've added id attributes to both your select and span elements. This allows me to easily get a reference to them in Javascript.
It's also important for my example that the script is executed after the elements are rendered, otherwise the document.getElementById call won't return a reference to them. You could get around this limitation by moving the script into a window.onload handler.
Here's a simple example of it working.
<span=tag>isn't valid HTML. Try<span id="tag">.