Question

我试图在有人在textarea中输入文本时用JavaScript隐藏Dropdown Box。

这是我到目前为止所做的：

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

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 2

如果你可以使用jQuery，你可以这样做：

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

这里是jsfiddle： https://jsfiddle.net/ezd5ajmf/

或作为代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

在textarea中输入值时隐藏下拉框

3 个答案: