javascript - HTML中的链接下拉列表和文本框

我有一个设计用例：
有些学生必须在每个班级每月支付费用。

因此，我尝试执行以下操作：
1.下拉列表1：包含学生姓名
2.下拉菜单2：包含月份名称
3.文本框：包含所选月份的费用金额。

我正在使用以下代码：

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

取自stackoverflow。但我无法：
1.以链接的方式添加一个下拉列表（针对学生），这样，一旦选择了一个学生，那么几个月下拉列表将被激活。
2.每月选择一次后，其label属性中的值应显示在文本框中。

任何投入将不胜感激。

问候，
GenXCoders

最佳答案

启用month选择框的onchange选择框student。
获取month上onchange选择框的值并在文本框中设置。

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