Question

我試圖用JavaScript隱藏下拉框，一旦有人在textarea中輸入文本。

這是我做過什麼，到目前爲止：

HTML

<table> 
    NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br> 
    <select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'> 
     <option>Select</option> 
     <option value="Cattle">Cattle</option> 
     <option value="Buffalo">Buffalo</option> 
     <option value="Horse">Horse</option> 
     <option value="Camel">Camel</option> 
     <option value="Dog">Dog</option> 
     <option value="Sheep">Sheep</option> 
     <option value="Pig">Pig</option> 
     <option value="Goat">Goat</option> 
     <option value="Deer">Deer</option> 
     <option value="Others">Others</option> 
    </select> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>  
      <textarea rows="3" cols="25" name="div86" id="color86" style='display:none'></textarea> 
     </td> 
    </tr> 
</table> 

的JavaScript

function CheckColors86(val) 
{ 
    var element=document.getElementById('color86'); 
     if(val=='Others') 
     element.style.display='block'; 
    else 
     element.style.display='none'; 
} 

Answer 1

如果你可以使用jQuery你可以做這樣的：

$('#color86').keyup(function() { 
    $('#travel_arriveVia').css('display', 'none'); 
}); 

這裏的jsfiddle： https://jsfiddle.net/ezd5ajmf/

或者像段：

$('#color86').keyup(function() { 
 
    $('#travel_arriveVia').css('display', 'none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br> 
 
    <select name="select86" id="travel_arriveVia"> 
 
     <option>Select</option> 
 
     <option value="Cattle">Cattle</option> 
 
     <option value="Buffalo">Buffalo</option> 
 
     <option value="Horse">Horse</option> 
 
     <option value="Camel">Camel</option> 
 
     <option value="Dog">Dog</option> 
 
     <option value="Sheep">Sheep</option> 
 
     <option value="Pig">Pig</option> 
 
     <option value="Goat">Goat</option> 
 
     <option value="Deer">Deer</option> 
 
     <option value="Others">Others</option> 
 
    </select> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td>  
 
     <textarea rows="3" cols="25" name="div86" id="color86"></textarea> 
 
     </td> 
 
</table>

Answer 2

function CheckColors86(val) 
 
{ 
 

 
    var element=document.getElementById('color86'); 
 
     if(val=='Others') 
 
     element.style.display='block'; 
 
    else 
 
     element.style.display='none'; 
 
} 
 
function hideDropDown(){ 
 
    var element=document.getElementById('travel_arriveVia'); 
 
    element.style.display='none'; 
 
} 
 
function showDropDown(){ 
 
    var element=document.getElementById('travel_arriveVia'); 
 
    element.style.display='block'; 
 
}

<table> 
 
     NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br> 
 
     <select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'> 
 
         <option>Select</option> 
 
         <option value="Cattle">Cattle</option> 
 
         <option value="Buffalo">Buffalo</option> 
 
         <option value="Horse">Horse</option> 
 
         <option value="Camel">Camel</option> 
 
         <option value="Dog">Dog</option> 
 
         <option value="Sheep">Sheep</option> 
 
         <option value="Pig">Pig</option> 
 
         <option value="Goat">Goat</option> 
 
         <option value="Deer">Deer</option> 
 
         <option value="Others">Others</option> 
 
        </select> 
 
        <tr> 
 
       <td></td><td></td><td></td> 
 
       <td>  
 
        <textarea rows="3" cols="25" name="div86" id="color86" onfocus='hideDropDown()'></textarea> 
 

 
       </td> 
 
       </table>

希望這有助於你出去。

Answer 3

添加以下功能的Java腳本，並調用它keyup事件如下

<textarea rows="3" cols="25" name="div86" id="color86" style='display:none' onkeyup="toggleListOption();"></textarea> 


function toggleListOption(){ 
    var el=document.getElementById('color86'); 
    if(el.value===""){ 
     document.getElementById('travel_arriveVia').style.display='block'; 
    }else{ 
     document.getElementById('travel_arriveVia').style.display='none'; 
    } 
}