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>

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

任何投入将不胜感激。

关于， GenXCoders

Answer 1

启用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>

 <script>
 document.getElementById("test").onclick = function() {
     $.toaster({
         priority : 'success',
         title : 'yassine Jennane',
         message : 'yassine jennane test toster'
     });
 };
 </script>

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

1 个答案: