I'm having trouble showing the concealed list with JavaScript

I am new to javascript and facing a challenge. Whenever I update the list items in an HTML example from engineer, pilot, technician, if I select engineer, there should be an onchange event calling a function in JavaScript that shows a hidden select list containing the division he works in, like wing or engine division.

This is the JavaScript code:

<script type="text/javascript">
   function func(v) {
     if(v=="Engineer"){
     var y=document.getElementById("a");
     y.style.visibility = "visible";
     }
   }
</script>

This is the HTML code:

<select onchange="func(this.value)">
    <option>Please Select</option>
    <option value="Engineer">Engineer</option>
    <option value="Pilot">Pilot</option>
    <option value="Technician">Technician</option>
</select>

Below is my hidden select list in HTML that should display when 'Engineer' is selected:

<select id="a" style="visibility : hidden">
   <option>select the division</option>
   <option>Wing Division</option>
  <option>Engine Division</option>
</select>

I seem to have a mistake in my JavaScript code, can anyone please assist me?

Answer №1

There was an error in your code - you cannot set it like CSS properties (:). The line y.style.visibility : ""; will result in an error.

Instead, you should set visibility using y.style.visibility = "";. Also, remember to hide the combo if it's not equal to "Engineer".

var y = document.getElementById("a");

function func(v) {

  if (v == "Engineer") {
    y.style.visibility = "";
  } else {
    y.style.visibility = "hidden";
  }
}
<select onchange="func(this.value)">
    <option>Please Select</option>
    <option value="Engineer">Engineer</option>
    <option value="Pilot">Pilot</option>
    <option value="Technician">Technician</option>
</select>


<select id="a" style="visibility : hidden">
   <option>select the division</option>
   <option>Wing Division</option>
  <option>Engine Division</option>
</select>

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

Passport appears to be experiencing amnesia when it comes to remembering the user

After extensive research online, I have yet to find a solution to my issue. Therefore, I am reaching out here for assistance. I am currently working on implementing sessions with Passport. The registration and login functionalities are functioning properl ...

The button's URL will vary depending on the condition

As a newcomer to coding, I am seeking guidance on creating a button with dynamic URLs based on user input. For instance, let's say the button is labeled "Book Now" and offers two package options: Standard and Premium. I envision that if a user selec ...

"Downloading an image from an encoded base64 canvas triggers an error due to exceeding the maxUrlLength

I'm using javascript to create a canvas drawing on my webpage and then convert it into a base64 image format. After that, I encode the URL of the image to obtain an encoded URL. I came across a post where it was mentioned that using window.location.hr ...

Stopping a div from causing the parent table's width to increase

I've encountered an interesting challenge with a project I'm working on. I need to inject markup into pages that I don't have control over, specifically within tables. The issue arises when my injected div causes the parent table to expand u ...

Is it possible to align the textarea to the right side of its sibling row using justify-content: space-between?

My rows consist of two sides: the right side with text and the left side with buttons, separated by justify-content: space-between; However, for the last row, I want to add a textarea that starts from the right-most side of the buttons. Is there a way to ...

How can we display the data returned by a successful AJAX request

Having an issue with displaying Ajax success data. success: function(data){ alert(need to print it here); } When I try to access the data using: console.log(data.responseText); {"success":false,"errors":{"text":["Some text.","some more text"]}} Any ...

Achieving www prefix enforcement for loading js file

I am facing an issue with the script on my website, which is built using OpenCart. The problem arises when accessing the site with a www prefix - the JavaScript file fails to load. However, when accessed without the www prefix (e.g. example.com), everyth ...

Incorporate variable key-value pairs into a JavaScript array or object

Is it possible to add a key value pair to an existing JavaScript associative array using a variable as the key? I need this for JSON encoding and prefer a simple solution over using plugins or frameworks. ary.push({name: val}); In the above code snippet, ...

Ways to reset the selected option when the user chooses a different option using either Jquery or Vanilla JavaScript

I am currently working on a functionality to clear the select option when a different brand is selected. The issue I am facing is that when I choose another brand, the models from the previous selection are not cleared out. For example, if I select BMW, I ...

What steps do I need to take in order to establish a connection to a GridFS bucket

I have successfully implemented file uploads using a gridfs bucket. However, I am facing challenges with downloading files. For retrieving files, I need to access the bucket instance that I created within the database connection function: const connectDB ...

Exploring the power of promises in the JavaScript event loop

Just when I thought I had a solid understanding of how the event loop operates in JavaScript, I encountered a perplexing issue. If this is not new to you, I would greatly appreciate an explanation. Here's an example of the code that has left me scratc ...

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...

Tips for triggering the API call only when a change is detected

#In the provided code snippet, the useEffect hook is being used to fetch data from an API using the apiData() function. The data retrieved consists of objects with properties such as id, name, parent name, and isActive. The isActive property is linked to ...

A tutorial on submitting multipart/form-data using JavaScript

I am currently facing an issue with the uploadImage API in my frontend. I am using input[type='file'] to obtain image data from users and then POSTing it to my API. In the backend, I am parsing this data using formidable. However, the problem ari ...

Change to a different button based on a condition in ReactJS

Currently, I am tackling a ReactJS project that involves the utilization of the following function: function checkMoves() { let index = 0; let moveList = []; while (index < props.moves.length) { if (!moveList.includes ...

Decreasing the vertical size of the page

My mobile page was meant to be all black, but it's only half black now. I tried the following CSS: @media (max-width: 768px) {body, html.page-id- 28{background-color: black! important;}} @media (max-width: 768px) {. parallax-window {background ...

How can I retrieve the width of a responsive React element during its initial rendering phase?

In my React project, there is a component called ResultList which is used to display products in a gallery format. The challenge I'm facing is determining the appropriate number of products to show per row based on the available width for the ResultL ...

What is the technique for choosing the parent's ID with jQuery?

When a user clicks on any team, I need to retrieve the parent's parent ID. For example, if someone clicks on a Premier League Team, I want to store the ID 2 in a variable called league_id. Here are my attempts so far: Using Closest Method $('u ...

How can I incorporate multiple quality sources into a flowplayer using Angular?

Is there a way to add multiple sources with different qualities like 1080p, 720p etc.? Thank you in advance. flowplayer('#my_player', { src: '../assets/videos/video_1080p.mp4', // title: 'This is just demo&apo ...

Automated Submission and Online Posting of (Web Form) with JavaScript Script

Is there a way to automatically fill out the form on my webpage ( ) using a JavaScript function with specific parameters? The source code for the webpage can be found here: webpage sourcecode script enter image description here ...