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