JavaScript将选择菜单选项附加到div标签

debugcn 发表于 Dev

mo1248

作为JavaScript的新手，我想出了如何使下拉菜单中所选对象的数量显示在中<div>。但是我试图弄清楚如何使在下拉菜单中选择的文本显示在中<div>。

<script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('question1');
    var optOtherReason = document.getElementById('displayresponse');
    eSelect.onchange = function() {
        if(eSelect.selectedIndex === 2) {
            optOtherReason.style.display = 'block';

            var li = document.createElement("li");
            li.innerHTML = eSelect.selectedIndex;
            var ul = document.getElementById("appendedtext");
            ul.appendChild(li); 

        } else {
            optOtherReason.style.display = 'none';
        } 
    } 
}

<body>
<select id="question1" name="question">
    <option value="x">Reason 1</option>
    <option value="y">Reason 2</option>
    <option value="other">Other Reason</option>
</select>
<div id="displayresponse" style="display: none;">Response here</div>
<ol id="appendedtext"> </ol>

高朗·丹顿（Gaurang Tandon）

用var options = document.getElementsByTagName("option")结合options[eSelect.selectedIndex].innerHTML;，就像这样：

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';
        } 
    } 
}