在html中怎么绑定前面的变化

就是在html页面中，我前面有一个select标签，可以选择，然后我想在后面做一个框，会根据我前面select标签选择的东西更新这个框，select标签选的什么，它的值就会在下面的框里显示，qing问要怎么做呢，感谢感谢


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <select name="select" id="select" onchange="change()">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
    <input type="text" id="input" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      function change() {
        var val = $("select").val();
        $("#input").val(val);
      }
    </script>
  </body>
</html>

通过select框id获取的select框的value，再赋值给下面的框，select框要设置事件

change事件里改变下面框的值呗