Onchage选择选项

Question

这是代码，我想表现出墙根输入时，我选择选项“其他”，但它不工作

<select id="transfer_reason" name="transfer_reason"> 
    <option value="text">Text</option> 
    <option value="email">Email</option> 
    <option value="integer">Integer</option> 
    <option value="other">Other</option> 
</select> 
<input type="text" id="otherdetail" value="" style="display: none;" /> 



<script type="text/javascript"> 
window.onload = function() { 
    var eSelect = document.getElementById('transfer_reason'); 
    var optOtherReason = document.getElementById('otherdetail'); 


    eSelect.onchange = function() { 
     if(eSelect.options[selectedIndex].value == "other") { 
      optOtherReason.style.display = 'block'; 
     } 
     else { 
      optOtherReason.style.display = 'none'; 
     } 

    } 
} 

它工作时，使用的selectedIndex

if(eSelect.selectedIndex === 3) { 

，但我想使用期权的价值

Answer 1

只要改变这一点：

eSelect.options[selectedIndex].value 

这样：

eSelect.options[eSelect.selectedIndex].value 

或者作为@CoreyRothwell说（和最佳/正道）：

eSelect.value 

你可能会得到（控制台）：

selectedIndex未定义

它的工作here。

Answer 2

变化

eSelect.options[selectedIndex].value == "other" 

到

eSelect.value == "other" 

Answer 3

在选项标签值Other但你与other比较它，你应该改变这样的：

window.onload = function() { 
    var eSelect = document.getElementById('transfer_reason'); 
    var optOtherReason = document.getElementById('otherdetail'); 


    eSelect.onchange = function() { 
     var selectedValue = eSelect.options[eSelect.selectedIndex].value; 
     //OR 
     selectedValue = eSelect.value; 

     //BUT the important point is using toLowerCase() like this 
     if (selectedValue.toLowerCase() == "other") { 
      optOtherReason.style.display = 'block'; 
     } else { 
      optOtherReason.style.display = 'none'; 
     } 

    } 
} 

或者只是这样做：

if (selectedValue.toLowerCase() == "Other") {//replace the "other" with "Other" 
    optOtherReason.style.display = 'block'; 
} else { 
    optOtherReason.style.display = 'none'; 
}