Chained Dropdown(s) and Textbox in HTML

Question

I am having a use case for a design: There are students who have to pay their fees every month in a class.

So I am trying to do the following: 1. Dropdown #1: Contains Student Names 2. Dropdown #2: Contains Month Names 3. Textbox: Contains Fees amount for the selected month.

I am using the following code:

$(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>

taken from stackoverflow. but i am unable to: 1. add a dropdown (for students) in a chained fashion, such that once a student is selected only then the months dropdown gets active. 2. once a month is selected, the value in its label attribute should be displayed in the textbox.

Any inputs will be more than appreciated.

Regards, GenXCoders

Why transfer the value of one type of form input to another? As in, what do you gain by transferring the value of the select to a text input? — Mitya
– Mitya, Commented Sep 23, 2018 at 16:43
@Utkanos Actually I am not wanting to transfer the value. I am using couchcms. And as the coding is permitting me to only have the fees amount in the label attribute, i am wanting to get it there. But for calculation purposes, I am also having it saved from the input to the backend. — GXCPL.Official
– GXCPL.Official, Commented Sep 23, 2018 at 16:54

NullPointer · Accepted Answer · 2018-09-23 17:11:48Z

2

Enable month select box onchange of student select box.
Get the value of month select box on onchange and set in text box.

$(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>

edited Sep 23, 2018 at 17:11

answered Sep 23, 2018 at 16:43

NullPointer

7,3885 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GXCPL.Official Over a year ago

what changes will I have to do in: var selectedValue = $(this).val(); $("#txtBox").val(selectedValue); to get the value of the label attribute rather than the value attribute.

NullPointer Over a year ago

$('#month :selected').attr('label')

GXCPL.Official Over a year ago

thanks a lot buddy. works like a charm. the best part, couchcms can easily be retrofitted into your code.

Collectives™ on Stack Overflow

Chained Dropdown(s) and Textbox in HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related