Question

I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value=”some_url” inside the option, then I want the image to show.

I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value=””.

Here is the Javascript I’m using:

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

Here is the 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>

I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to “show if” or “hide if” along with the onClick command within each option.

Answer 1

this is how I would do it:

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