Show a checkmark option once a selection is made in the dropdown menu

I've successfully created a dropdown menu featuring animals. Now, what I'm aiming to do is, once I select an animal from the dropdown, can I make a checkbox button 'appear'? Essentially, I want it to be hidden initially, and then once I choose an animal and click on it, the checkbox button will become visible.

Currently, my code only pertains to the dropdown menu... 

    <li><a href="#" 
    onmouseover="mopen('m1')" 
    onmouseout="mclosetime()">animals</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()" 
        onmouseout="mclosetime()">
    <a href="#">Dogs</a>
    <a href="#">Cats</a>
    <a href="#">Cow</a>
    <a href="#">Goats</a>
    <a href="#">Tiger</a>
    </div>
</li>

Seeking assistance, thank you!

javascripthtmlcsscheckboxdrop-down-menu

Answer №1

Here is an example of how to use jQuery:

<a href="#" onclick="$('#chkdogs').show();return false;">Click here to see Dogs</a>
<input id="chkdogs" type="checkbox" name="dogs" value="dog" style="display:none;">

Answer №2

My recommendation would be to:

  • Dynamically add checkboxes when an onclick event is triggered.
  • Alternatively, hardcode the checkboxes next to each animal and hide them initially. Then use the onclick event to reveal them.
  • Finally, consider utilizing jQuery as it offers a more user-friendly approach.

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

I attempted an AJAX script, but unfortunately, it was unsuccessful. Upon submitting the form, I received a success alert, but no data was sent to

I have been struggling with an Ajax script that doesn't seem to be working as expected. When I submit the form, I receive a success alert but nothing is being sent to the database. Here is my HTML form: <form action="account_info.php" enctype="mu ...

javascriptphpjqueryajaxforms

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

javascriptjqueryhtmlcopyappend

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

htmlcssangular

Using dynamic values in Angular functions

Here is the code snippet I am working with: $scope.testByValue = function() { $scope.fChanged($scope.lists.title); }; But I am facing an issue on the page where the value for: $scope.testValue = testValue; The variable testValue is being assigned a ...

javascriptarraysangularjs

The functionality of my LinkButton activates a code sequence only when clicked twice during its Click event

Protected Sub lnkContractors_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkContractors.Click If Context.User.IsInRole("HOD") Then lnkContractors.OnClientClick = "PopupCenter('Juniors.aspx', &apo ...

javascriptasp.netdom-eventsasp.net-ajax

Guide on redirecting a user to a different path when their token has expired

I am currently working on a project to create a simple website, and I am facing an issue with redirecting the user to a login page if their token has expired. I have attempted to solve this using React-JWT, but I am unsure of the proper way to do it. Here ...

javascriptreactjsjwtreact-router-dom

What causes the low Performance score of a default NextJS Application with no content?

Just started experimenting with my initial Next.js project. Upon generating a new project using create-next-app, I decided to test its performance with the web application 'Lighthouse'. Surprisingly, although most other metrics scored above 90, ...

javascriptperformancenext.jslighthouse

A text box will appear when you click on the edit button

When the edit button is clicked, I need to display text boxes and list boxes. Can someone please provide suggestions on how to accomplish this? HTML: <div class="textboxes"> <ul> <li><input type="text" id="txt" /></li> ...

jqueryhtmlcss

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Create a `div` element that transforms into a box when hovered over and displays text

Sorry for repeating a common question, but I'm struggling with CSS and need some help. I am new to this, so any assistance is greatly appreciated. I want to display 14 "element boxes" each with their own background, etc. When hovered over, I would li ...

htmlcss

Ways to display only particular dates in react-dates

I am working with an array of dates. const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22" ...

javascriptreactjsdatepickermomentjsreact-dates

Verify if the connection to MongoDB Atlas has been established for MongoDB

When working with MongoDB, I find myself switching between a local database during development and MongoDB Atlas in production. My goal is to implement an efficient text search method that utilizes $search when connected to MongoDB Atlas, and $text when co ...

javascriptnode.jsmongodbmongodb-atlasmongodb-atlas-search

can you explain which documents outline the parameters that are passed into the express app.METHOD callback function?

As a beginner in javascript and nodejs, I often struggle with understanding callback functions. One thing that particularly confuses me is determining what arguments are passed into a callback function. Let's consider the following example: app.get( ...

javascriptnode.jsexpresscallback

Display or conceal <tr> elements according to various <select> boxes using angularjs

My current setup includes a multiple select box as shown below <select multiple name="transActionGroup" id="transActionGroup" ng-multiple="true" ng-model="transActionGroup" title="Hold CTRL to select more than one transaction type."> <option ...

javascriptangularjs

The jQuery progress bar vanishes once .load() is employed

I have successfully implemented progress bars on my website. However, I am facing an issue when I reload the div using jQuery's .load() function. After the div is reloaded, the progress bars disappear, although everything else seems to be functioning ...

javascriptphpjqueryajaxprogress-bar

Removing an item from a list by clicking a button

I am currently developing my own version of a mini Twitter platform. Everything is functioning smoothly, however I am facing an issue with deleting specific tweets upon the click of a button. I have attempted using splice(), but it consistently deletes th ...

javascripthtmlarrayssplice

PHP $_FILES array is found to be empty during file upload using AJAX

My form includes an input field for attachments: <form enctype="multipart/form-data" action="" method="post" id="sendInvoiceForm"> ..... <div class="templateDiv"> <span class="invoice_email_label">Email attac ...

javascriptphpajax

Creating a grid layout that features responsive images and text displayed side by side is a simple and effective way to

Hello Expert, I am looking to showcase images and text in a grid layout. However, I have noticed that there is too much space between the image and text. How can I adjust this? Here is the CodePen link for reference: CodePen Link Please find attached a ...

htmlcss

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

The autofocus feature does not function properly while utilizing the onMouseDown event

There are two very similar components that control the focus for the input when it is displayed: Check out this example here Or explore this one In the second scenario, I opted for using the onMouseDown event instead of onClick for the button that trigg ...

javascriptreactjs