Question

如果value=""（引号内没有任何内容），我需要能够隐藏在选择字段中单击选项时出现的图像。如果选项中的值=“some_url”，那么我希望显示图像。

单击选项时，我使用以下代码显示图像。但是当使用onClick时，即使选项值=“”，它也会显示图像。

这是我正在使用的Javascript：

function showImage() {
    document.getElementById('openimg').style.display = 'block';

这是html：

<select name="" >
   <option value="url" onclick="showImage();">Some_option_1</option>
   <option value="">Some_option_2</option>
   <option value="">Some_option_3</option>
 </select>

<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

我只在一个选项中插入了一个onClick命令，只是为了表明它有效。看来我需要一个if语句来“显示if”或“hide if”以及每个选项中的onClick命令。

Answer 1

我就是这样做的：

<script type="text/javascript">
function showImage()
{
    var choice = document.getElementById('myDropDown').value;
    if(choice.length > 0)
    {
        document.getElementById('openimg').style.display = 'block';
    }
    else
    {
        document.getElementById('openimg').style.display = 'none';
    }
}
</script>

<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

Answer 2

嗯，你问如何使用if或如何确定选择的内容？

首先，在下拉列表中使用onchange事件。

这是用于说明目的的LONGHAND方式。

function onChange(){

    var mySelect = document.getElementById("my-select");
    var selectedValue = "";

    for( var i = 0; i < mySelect.length;i++){
       if( mySelect[i].selected)
         selectedValue = mySelect[i].value;        
    }

    if( selectedValue == "whatever")
    {
           //do something
    }

    if( selectedValue == "ugh")
          // do something else


}

使用onClick时如何基于IF语句隐藏元素

2 个答案: