Use var options = document.getElementsByTagName("option")
in conjunction with options[eSelect.selectedIndex].innerHTML;
, like this:
window.onload = function() {
var eSelect = document.getElementById('question1');
var optOtherReason = document.getElementById('displayresponse');
// the option elements
var options = document.getElementsByTagName("option");
eSelect.onchange = function() {
if(eSelect.selectedIndex === 2) {
optOtherReason.style.display = 'block';
var li = document.createElement("li");
// eSelect.selectedIndex is the index (call it `n`) of the option
// get that `n`-th option element from `options`
// get its `.innerHTML`
// and set to `li.innerHTML`
li.innerHTML = options[eSelect.selectedIndex].innerHTML;
var ul = document.getElementById("appendedtext");
ul.appendChild(li);
} else {
optOtherReason.style.display = 'none';
}
}
}
EDIT:
If you want to display every change:
- in the ordered list- http://jsfiddle.net/GaurangTandon/6h9TT/3/
- in the
div
- http://jsfiddle.net/GaurangTandon/6h9TT/4/