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

Question

我有一个设计用例: 有些学生每个月都要交学费。

所以我正在尝试执行以下操作: 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>

取自计算器。但我无法: 1. 以链式方式添加一个下拉列表(针对学生)，这样一旦选择了学生，月份下拉列表就会激活。 2. 选择一个月后，其label 属性中的值应显示在文本框中。

我们将不胜感激。

问候， GenX编码器

Answer 1

1. 启用 month 选择框 onchange 的 student 选择框。

2. 在onchange上获取month选择框的值，并在文本框中设置。

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