Adjust form elements dynamically depending on the selected option in a dropdown menu using Ruby on Rails

I currently have the following database tables set up:

Departments
ID| Department_name | Manager_ID

Employees
ID| Name | Department_ID

Salaries
ID| Employee_ID | Salary_Amount

The departments table holds information about different departments within the organization. Employees are assigned to specific departments in the employees table, and their salaries are recorded in the salaries table. The manager of each department is also listed in the departments table.

In my web application, I need to display a dropdown list of department names for users to choose from when assigning an employee to a department. However, I want to only show the managers' names as options in the dropdown list if the selected department has a designated manager. If a department does not have a manager assigned, then no manager name should appear in the dropdown list.

Could you suggest the best approach to implement this feature using Ruby on Rails? Essentially, I am looking to conditionally populate the dropdown list based on data stored in the Departments table.

javascriptruby-on-railsrubyruby-on-rails-3

Answer №1

To start, make sure to initially hide the select box for payment terms by applying a specific CSS class. Let's use the id payment_terms for reference.

Next, when rendering the services select box, include an additional data attribute to indicate whether the service is credited or not, using either 0 or 1 as values.

<select id=services>
<% services.each do |service| %>
    <option value=<%= service.id %> data-iscredit=<%= service.type.isCredit ? '1' : '0' %>><%= service.desc %></option>
<% end %>
</select>

Then, create a simple JavaScript script that handles the change event on the services select box. This script will toggle the visibility of the payment_terms select depending on the value of isCredit. Assuming jQuery is being used:

$("#services").change(function() {
   var selectedOption = $(this.children[this.selectedIndex]);
       isCreditValue = parseInt(selectedOption.attr('data-iscredit'));
   if (isCreditValue === 0) {
       $("#payment_terms").hide();
   } else {
       $("#payment_terms").show();
   }
})

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

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

javascriptreactjsjson

Is there a delay in Javascript identifying user existence when retrieving values from ajax?

I'm working on a script that checks if a username already exists before allowing a visitor to proceed. Here's a snippet of the code I'm using: EDIT: I've made some adjustments based on your feedback, but I'm still having trouble g ...

javascriptajaxreturn

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none; The issue arises when a sub-menu is opened an ...

javascriptjqueryjsonhtmlcss

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

javascriptjqueryhtmlcss

Calculate the total width of all images

I'm on a mission to calculate the total width of all images. Despite my attempts to store image widths in an array for easy summing, I seem to be facing some challenges. It feels like there's a straightforward solution waiting to be discovered - ...

javascriptreactjs

What is the mechanism through which the subtraction operator initiates the conversion of an array to a

Here are a couple of examples showcasing my code. Let's start with the first one: console.log([4] + 10); //"410" It is commonly known that the addition operator can only work with numbers and strings. Therefore, in this case, [4] needs to b ...

javascriptarraysstringnumbers

View cards from a restricted Trello board without requiring visitors to have a Trello account or to authorize through a popup

I have a company with ongoing projects listed on a private Trello board. We are interested in showcasing these projects on our website in real-time by connecting to the board. After implementing this example, I can successfully retrieve and display the ca ...

javascriptphpjquerytrello

In React/Next.js, it seems that pressing the useState button twice is required in order for an event to trigger

When working with react/nextjs, I encountered an issue with a click event where I'm trying to use setState to modify an array. Strangely, the modification only takes effect after two clicks of the button. Here is the initial state array: const [array ...

javascriptreactjsnext.jsreact-hooks

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such

Despite encountering similar questions, none of the provided answers seem to address the issue within my codebase. My project utilizes React 17, Mui v5, and TS v4. I attempted to integrate a basic component from an external package called rc-dock. I simply ...

javascriptreactjstypescriptmaterial-uireact-dnd

unable to retrieve the value from the scope

I'm trying to implement the following code in HTML: <div ng-if="item.shareText"> <textarea></textarea> <div> <select ng-model="shareOptions"> <option value="PUBLIC" selected>public</option> ...

javascriptangularjsangularscopeangularjs-scope

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

javascriptreactjstypescriptinterface

JavaScript: Add an element to the precise middle of an array

Sorry if this is a repeat question, but I couldn't find the answer despite searching. Let's say there's an array of unknown length and you want to insert items at a specific position, such as the center. How can you achieve this? Here&apos ...

javascriptarraysmethods

Each time a page loads, the react useContext feature is causing the web socket connection to reset

I have integrated websockets into various parts of my nextJS application and need to make sure they are accessible everywhere without resetting the socket connection. Whenever the connection is reset, it loses all the rooms it was connected to, causing iss ...

javascriptreactjswebsocketnext.jssocket.io

javascript Arabic speech synthesis

Attempting to utilize SpeechSynthesisUtterance for Arabic language Successfully functioning with English content $(document).ready(function() { var u1 = new SpeechSynthesisUtterance('Hello world!'); u1.lang = 'en-US'; u1.pitch ...

javascriptjquerytext-to-speech

Combining both the Javascript and PHP components of the Facebook SDK

I recently integrated the JavaScript version of Facebook SDK, but now I'm unsure how to also integrate the PHP version without causing any conflicts. Here are my questions: If I implement the PHP SDK from Facebook, is there a way to detect if the J ...

javascriptphpfacebookfacebook-graph-api

Ways to conceal the current state changes from being displayed in the URL

I've implemented a React form with text fields and radio buttons to store data in the state. The 'Proceed' button triggers an onClick function: handleClick(event){ console.log(this.state); var userID = 1; firebase.database().ref ...

javascriptreactjs

Error when attempting to open and close a div through a click event

Currently, I am in the process of developing a web service that generates arrays. I am facing an issue where all the div elements on my page load open by default, but I want them to remain closed and only open upon clicking. Specifically, I want a nested d ...

javascriptphpjqueryhtmlcss

Load image asynchronously using a mirror server in React/Next.js with a set timeout time

For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...

javascriptreactjsnext.jsipfs