js实现下拉框选项与输入框内容的同步修改js小实验室，需要实现一个需求：<select>下拉框选中内容，<input>输

需求

<select>下拉框选中内容，<input>输入框显示相应内容。

实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1px" style="width:530px;
      height: 320px;
      border-style: groove">
    <tr style="height: 40px;">
      <td style="width: 170px;">
        <center>请填写以下账号申请表</center>
      </td>
      <td bgcolor="#99ccff"></td>
    </tr>
    <tr style="height: 40px;">
      <td style="width: 170px;text-align:right">班 级：</td>
      <td>
        <select id="banji" onchange="setXuehao(this.value)" style="width: 160px; height: 35px;">
          <option selected>请选择班级</option>
          <option value="xinguan171">信管171</option>
          <option value="xinguan172">信管172</option>
        </select>
      </td>
    </tr>
    <tr style="height: 40px;">
      <td style="width: 170px;text-align:right">学 号：</td>
      <td>
        <input type="text" id="xuehao">
        <span style="color: red">*</span>
        <span>注意：只能输入学号。</span>
      </td>
    </tr>
  </table>

  <script>
    function setXuehao() {
      // var selectidValue = document.getElementById('banji').options[document.getElementById('banji').selectedIndex].value;
      var selectidValue = document.getElementById('banji').options[document.getElementById('banji').selectedIndex].value;
      var inputValue = document.getElementById('xuehao').value;
      // if(document.getElementById('banji').selectedIndex != 0)
      //   document.getElementById('xuehao').value="2017102341"+document.getElementById('banji').selectedIndex;
      if (selectidValue == "xinguan171")
        document.getElementById('xuehao').value = "2017102341";
      else if (selectidValue == "xinguan172")
        document.getElementById('xuehao').value = "2017102342";
      else
        document.getElementById('xuehao').value = "";
    }
  </script>

</body>

</html>