Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following:

<select>
<%if(size == 1)%>
  <option>None selected</option>
<%if(size > 1)%>
  <option>1</option>
</select>

Additionally, I have this image:

<td style="text-align:left">
            <label id="checked" style="color:grey; display:none">
                <img src="images/check.png" width="20px" height="20px"/>
                Checked
            </label>
        </td>

My query pertains to how I can make the image visible only when the "None selected" option is chosen. If '1' is selected, then I do not want the image to appear. How can I achieve this?

htmlcssjsp

Answer №1

If you're facing an issue, this code snippet utilizing JQUERY might be the solution you need.

 $("#selectID or .selectClass").change(function () { //Use either the id or class name for the select element

    var option=$(this).val();
    if(option=="None selected")
    {
      $("#checked").css("display","block");

    }
    else
    {
       $("#checked").css("display","none");
    }      

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...

javascripthtmlcssanimationdata-visualization

What is the process for setting dynamic variables as CSS content within Vue.js?

Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further. Is it feasible t ...

cssvue.js

Jquery Navigation with Responsive Design

How can I hide and reveal the mobile menu I've created using Jquery? I want it to be hidden when the page loads and only appear when the user clicks on the 'header'. Additionally, I need the menu to remain open even when the user scrolls dow ...

jqueryhtmlcssresponsive-design

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

htmlcss

Countdown malfunction: wrong date displayed

Utilizing the Countdownjs library in my project is resulting in an incorrect day count. Incorporating AngularJS, here is the custom directive I've implemented for the countdown: .directive('tempoPercorrido', function($interval){ ret ...

javascripthtmlangularjsangularjs-directivecountdown

Why isn't the parent div stretching alongside its child divs?

Take a look at this example: wthdesign.net/website/olaf&co/index.php I am currently working on creating a responsive layout, but I am struggling to figure out how to make the "#content" div stretch with its child div when there is more content than ex ...

csshtmllayoutstretch

Is it possible to direct the user to a particular link upon swiping to unlock?

Hello everyone, I could use some assistance with this code. I am looking to redirect someone to a specific page when they swipe to unlock and automatically transfer them to another page when the swipe ends. Any help is greatly appreciated. Thank you! $ ...

javascripthtmlcss

Troubleshooting an issue with Laravel's Bootstrap 5.2 dropdown functionality

After setting up a pre-configured navbar from the Bootstrap website, I noticed that the dropdown feature is not working. This issue arose with the latest version of Bootstrap 5.2 which was integrated into my Laravel project without any modifications to the ...

javascripthtmlcsslaravelbootstrap-5

If a number already exists, create 3 tables using MySQL and PHP

Currently facing an issue, I am in the process of developing a custom registration form for a browser game. I need to assign planets upon registration to users. Here's the breakdown: 9 galaxies, each galaxy consisting of 400 systems with each syste ...

phphtmlmysqlrandom

Using jQuery, is there a way to move an element from one div to another, but only if the destination div is currently empty

<div id="apply"></div> <div id="droppable_slots"> <div class="slot 1">1</div> <div class="slot 2">2</div> <div class="slot 3">3</div> </div> Is there a way to utilize jquery in order ...

javascriptjquerycsshtml

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

There are three individuals each working on separate sections of a webpage. One is focusing on moving images, another is devoted to the tab section. This begs the question: 1) Is it feasible to embed all these HTML sections into a single HTML page and dis ...

htmlangularjsuser-interface

Using border-spacing on table body rows exclusively

In my table, I have 2 header rows and multiple body rows. To create a spacing of 10 pixels between body rows, I used the following CSS: border-collapse: separate; border-spacing: 10px; However, this also affected the spacing in the header rows, which I w ...

htmlcss

Contents of the container are not displayed in a single line

What could be causing the first element not to align with the other elements in the container? I'm having trouble figuring out why this is happening. The code snippet seems to work, but when I implement it on the webpage, the alignment issue arises. W ...

css

Text centered on hover for figure caption

Check out this fiddle http://jsfiddle.net/sLdhsbou/ where I am trying to center the "x" that appears on hover perfectly no matter what size the image is. Also, why does the transition not occur when moving the mouse outside of the figure, unlike when movi ...

javascriptcss

Unlocking the Power of Combining JMVC and Server-side MVC Models

It's been a few days since I posted this question here and still no response. I also tried posting it on forum.javascriptMVC.com and finally got an answer, but I'm looking for more insights. Here's my question: After reading the documentat ...

javascriptphpajaxhtmljavascriptmvc

Sending a base64 image of a canvas to a servlet

I have a JavaScript function that uploads HTML5 canvas base64 image data to a servlet. Here is the code: function saveDataURL(a) { var postData = "canvasData="+a; var ajax = new XMLHttpRequest(); ajax.open("POST",'uploadPhoto.cgi',tr ...

javajavascripthtmlservletscanvas

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

javascripthtmlangulardom

enclosing the pre tag within a table cell

Despite using the latest Twitter Bootstrap, I am facing some issues with pre tags inside table cells. When a line is too long, it should create a horizontal scroll, but unfortunately, that does not happen. Check out this example without using the pre tag. ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to target a class within a span using CSS?

I need help with hiding an icon from the mobile menu. I am unsure about how to target this specific class within the menu structure. <a class="funiter-menu-item-title" title="Nieuw">Nieuw<span class="icon fa fa-chevron-down"></span>< ...

htmlcssclassmobile