Question

我有一个收集页面，学生将参加哪些课程，并在表格中同时显示Course Title和Catalog Number。如果学生选择Course Title，它将自动填写下一个单元格中的Catalog Number，反之亦然。

我唯一遇到的问题是，当您填写一个Course Title时，它会填充每个Catalog Number单元格（反之亦然）。

<body>
  <table>
    <tbody>
      <tr>
        <td>
          <input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()">
          <datalist id="courses" name="courseDatalist">
		<!--Filled in script-->					
	  </datalist>
        </td>
        <td>
          <input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()">
          <datalist id="catalogs" name="catalogDatalist">
		<!--Filled in script-->
	  </datalist>
        </td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="testTemplateJS.js"></script>
  <script>
    //Course Names
    var courseNames = ["Class A", "Class B", "Class C", "Class D", "Class E"];
    var list = $('#courses')[0];

    courseNames.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    //Catalog Numbers
    var catNumbers = ["Catalog 1", "Catalog 2", "Catalog 3", "Catalog 4", "Catalog 5"];
    var list = $('#catalogs')[0];

    catNumbers.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    function UpdateCatNumbers() {
      //on change of courseInput, run...
      $("input[name=courseInput]").change(function() {
        //declare a as the array index # of courseNames
        var a = courseNames.indexOf($(this).val());
        //change catalog input to display the same array index of catNumbers
        $("input[name=catalogInput]").val(catNumbers[a]);
      });
    }
  </script>
  <script>
    function UpdateCourseNames() {
      $("input[name=catalogInput]").change(function() {
        var b = catNumbers.indexOf($(this).val());
        $("input[name=courseInput]").val(courseNames[b]);
      });
    }
  </script>
</body>

如何获取它，以便UpdateCatNumbers()和UpdateCourseNames()函数仅填充直接位于它们旁边的单元格？

Answer 1

因此，您只需要将该值应用于其他输入。在这种情况下，您可以使用jQuery import { FETCH_SONG } from "../actions/types"; export default function(state = null, action) { switch (action.type) { case FETCH_SONG: console.log(action.payload); return action.payload; default: return state; } }-通过它您可以基于索引从jQuery集合中选择单个元素：

eq(index)

根据页面（单元格）中的位置执行JavaScript功能吗？

1 个答案: