Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes.

My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month

The code I am using:

$(document).ready(function() {
  $("#myDropdown").change(function() {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
      <select id="myDropdown">
        <option value="jan" label="2000">January</option>
        <option value="apr" label="2500">April</option>
        <option value="jul" label="2000">July</option>
        <option value="oct" label="2500">October</option>
      </select>
      <div>
        <input id="txtBox" type="text" readonly='1'>
      </div>
    </td>
  </tr>
</table>

This code was sourced from stackoverflow. However, I'm facing challenges with: 1. Implementing a chained dropdown for students and months, ensuring that only when a student is selected does the months dropdown become active. 2. Displaying the value in the label attribute of the selected month in the textbox.

Any suggestions would be greatly appreciated.

Thank you, GenXCoders

Answer №1

  1. Activate the month selection box when a student is chosen.

  2. Retrieve the selected value from the month selection box and display it in a text box upon change.

$(document).ready(function() {
  $("#student").change(function() {
    $('#month').prop('disabled', false);
  });
  
  $("#month").change(function() {
    var selectedValue = $('#month :selected').attr('label');
    $("#txtBox").val(selectedValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
    <select id="student">
      <option value="Student1">Student1</option>
      <option value="Student2">Student2</option>
      <option value="Student3">Student3</option>
    </select>

    <select id="month" disabled>
      <option value="jan" label="2000">January</option>
      <option value="apr" label="2500">April</option>
      <option value="jul" label="2000">July</option>
      <option value="oct" label="2500">October</option>
    </select>
    <div>
      <input id="txtBox" type="text" readonly='1'>
    </div>
    </td>
  </tr>
</table>

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

Guidelines for incorporating a router into the title of a Vuetify.js toolbar

I am currently utilizing vuetify.js in my project and I encountered an issue. I wanted the application title to link to the top menu, but when navigating to /route shop and /discount, the HogeHoge button's state changed unexpectedly. Is there a soluti ...

Update information interactively in Vuejs for all stored data

I am facing an issue with my code where the totalUserPosts value is returning as Zero after an AJAX call, and I need to find a solution for this problem. new Vue({ el: "#app", data: { totalUserPosts:0, }, methods:{ getPostsAjax () { $.ajax({ ...

Get rid of the unnecessary vertical line that is located at the end of the string

I have come across a situation similar to the one demonstrated in this code snippet: http://plnkr.co/edit/eBjenGqgo3nbnmQ7XxF1?p=preview Currently, I am working with AngularJS 1.5.7. The directives used in my input - ( first ) textarea are the same as tho ...

How can I set a default value for a v-select using a function in vue.js / vuetify?

I'm new to utilizing vuetify and I am curious if there is a method to set a value for a v-select using a function. My form can create an enterprise, leveraging apollo.js to connect with the database. Although all fields populate correctly when modifyi ...

The JavaScript function String.split() is generating an array filled with 20 empty strings

Attempting to replicate the functionality of jQuery's string-based HTML element determination, I employed a split function. However, rather than returning a list of values as intended, it produced an array containing twenty empty strings. console.l ...

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

jquery global variable not working as expected

I'm having trouble making some variables global outside the jQuery function. I've tried using 'var' to declare them first and then assigning values, but when I try to log() them at the end, I get undefined. var lat, lon; $.get('ip ...

Looking for a jQuery-controlled (Autocomplete + Multiselect) tool with checkbox functionality?

One of my clients has requested a control that combines both "Multiple selection + Autocomplete" features. You can view an example use case at the following URL: I am wondering if any JavaScript frameworks support this feature for performing multi-select ...

Can someone provide a method to automatically align bootstrap 5 footers within a set of cards?

Trying out this HTML code in Bootstrap 5, I noticed that the third column appears longer than the first two columns: <!-- bootstrap scripts --> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

Uploading a file to a URL using Node.js

Looking for a way to replicate the functionality of wget --post-file=foo.xpi http://localhost:8888/ in nodejs, while ensuring it's compatible across different platforms. In need of assistance to find a simple method for posting a zip file to a specif ...

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. Previously, clicking on user details would take the user to the dashboard.tables state. However, I encountered ...

What is the function of the next and back buttons in AngularJS?

I need assistance with creating next and previous buttons in Angular. As I am new to programming, I have written a program that works when using a custom array $scope.data = []. However, it doesn't work when I use $http and I would appreciate any help ...

What is the best way to import API Endpoints from various directories in an Express Server?

I have been using a script to load my API endpoints like this: readdirSync('./routes/api').map((r) => app.use( `/api/v1/${r.split('.')[0]}`, require(`./routes/api/${r.split('.')[0]}`) ) ); This script reads eve ...

Why is my navbar not functioning properly with Bootstrap 5 and HTML?

My navigation bar suddenly stopped working and now my background image, text on the background image, and navigation have all turned white after I added links to different hrefs. I'm also using bootstrap 5. The only thing I can see is from my id citat ...

Why isn't my code able to locate the navigation partial?

Here is my contact.ejs file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Title</title> <style> body { background: skyblue; font-family: verdana ...

The process of uploading images to a server by making an AJAX call to a PHP file

I have an input file and I want to upload the attached file to the server with a message saying "uploaded successfully" when I click on the upload button. However, I am getting a "file not sent" message. (The uploaded images need to be saved in the uploa ...

Node Pagination and Filtering feature malfunctioning

I am currently working on incorporating Pagination and Filtering in the backend functionality. This controller receives input such as Page number and Filtering conditions. Controller:- const getPosts = asyncHandler(async (req, res) => { const { ...

Echoing PHP code is being output as HTML comments

I recently encountered a strange issue while working with some PHP code in a file: <?php include_once('includes/connection.php'); include_once('includes/article.php'); $article = new Article; $articles = $artic ...

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

Is it possible to list bash/sh files as dependencies in package.json?

Currently, I have a bash script named publish.sh that I use for publishing modules to npm. Since I am constantly adjusting this script, I find myself needing to update every copy of it in each npm module I manage. Is there a method to include this bash sc ...