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

Could we customize the appearance of the saved input field data dropdown?

I'm currently working on styling a form that includes an input field. The challenge I'm facing is that the input field needs to be completely transparent. Everything works fine with the input field until I start typing, which triggers the browser ...

htmlcssforms

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

What is the best way to save high-resolution images created with HTML5 canvas?

Currently, there is a JavaScript script being used to load and manipulate images using the fabricjs library. The canvas dimensions are set to 600x350 pixels. When smaller images are uploaded onto the canvas and saved as a file on disk, everything works c ...

javascripthtmlcanvashtml5-canvasfabricjs

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Is it possible to store multiple values into a single variable and then access them in a setTimeout function? $(document).ready(function (){ div ({'div':'#noo','auto':'true','pos':'top',' ...

javascriptjqueryhtmlwebsettimeout

Transferring data between two HTML files through the POST method

Is there a way to pass two values (parameters) from one HTML page to another without displaying them in the URL, similar to using the POST method? How can I retrieve these values on the second HTML page using JavaScript, AJAX, or jQuery? For example: cli ...

javascriptjqueryhtmlajax

Can the max-height CSS media-query be utilized safely?

It seems that using the max-height media query is proving to be quite a challenge due to an issue with Chrome 67 on iOS. The problem arises when users scroll on Chrome as it constantly adds and removes the address bar. This action causes the max-height va ...

htmlioscssgoogle-chrome

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Looking for a solution to refresh the header component upon clicking the logout button, in order to display the login and register options without refreshing the entire page. Any effective suggestions on how to achieve this are greatly appreciated. The l ...

phphtmllaravelvue.jsvuejs2

Best practices for arranging several divs with CSS

I am in the process of creating a main header for several web pages I'm working on. The layout I have in mind includes an image, centered text below the image (all to the left of the main header), a main header that I want to be in the center of the p ...

htmlcssstyles

The back to top feature is malfunctioning when navigating to a new page

I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...

jqueryhtmlajaxjquery-mobilescrolltop

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascriptjqueryhtml

What are the best methods for adjusting the size of a game's

I create games using HTML5/CSS/JS, but I am struggling to figure out how to make them scale to different screen resolutions. It seems like a simple task, but I can't seem to grasp it. SOLVED var RATIO = 480 / 800; // Initial ratio. function resize() ...

javascriptcsshtmlmath

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

javascriptjqueryhtmlcssajax

Error encountered: Unable to assign onClick property to null object

Hey everyone, I'm running into an issue with my JavaScript. It keeps throwing a TypeError: Cannot set properties of null (setting 'onclick') at SignUp.js:4:43 <HTML> <body> <div class="input-box"> <span class="deta ...

javascripthtml

Ensuring the bootstrap footer remains anchored at the bottom of the page content

I've been struggling for 3 days to get the footer to stay at the bottom of my webpage content. I've searched through many similar questions, but still can't find a solution. Here is my code: .container{position:relative;} footer{position: ...

htmlcsstwitter-bootstrap

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

htmlcssangular

issue with jquery fade toggle not working properly on Bootstrap website

My website is built using Bootstrap and jQuery. I am facing an issue where the fadeToggle() function on a div element is not displaying properly - it remains hidden all the time. Can anyone provide insight into what might be causing this problem, or sugg ...

jqueryhtmltwitter-bootstrap

Problem with fixed element on mobile due to viewport width

I am experiencing an issue with the fixed element's width. Here is a code snippet for reference: https://codepen.io/highfield/pen/PKpXGG <body> <nav class="navbar"> <div style="position:absolute; left:20px; top:12px"> & ...

csstouchfixedhorizontal-scrolling

Ensure that the initial section of the page spans the full height of the browser, while all subsequent sections have a

I have a website composed of various blocks with different heights, all extending to full width. My goal is to make the first block the full height and width of the browser window, while keeping the other blocks at a set height as seen on this site: After ...

javascriptjqueryhtmlcss