在输入值更改时在另一个 Select 选项值中显示输入字段值

Display the Input field Value in another Select Option Value on change of input value

我已经成功地使用 HTML 形式将输入值显示到另一个输入。我想在 selectoption 元素中显示输入值,而不是 input 3 和 input 4.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form action="" method="post">
  <input
    type="text"
    id="myInput1"
    onchange="myChangeFunction(this)"
    placeholder="FIRST "
  />`

  <input
    type="text"
    id="myInput3"
    onchange="myChangeFunction1(this)"
    placeholder="SECOND "
  /><br />

上面的输入显示在下面的输入字段中。

  <br />
  <input type="text" id="myInput2" /> <br />
  <input type="text" id="myInput4" />

但我想在输入 myinput1 和 myinput3 时,在 select 字段的以下选项值中显示上面的 myinput2 myinput4 值。

  <select>
    <option>????? Here insert the value obtained at myInput2</option>

    <option>??? Here insert the value obtained at myInput4</option>
  </select>

  <script type="text/javascript">
    function myChangeFunction(input1) {
      var p1 = document.getElementById("myInput2");
      p1.value = input1.value;
    }

    function myChangeFunction1(input3) {
      var p2 = document.getElementById("myInput4");
      p2.value = input3.value;
    }
  </script>
</form>

看看

    function myChangeFunction(input1) {
      var p1 = document.getElementById("option1");
      p1.value = input1.value;
      p1.innerHTML = input1.value
    }

    function myChangeFunction1(input3) {
      var p2 = document.getElementById("option2");
      p2.value = input3.value;
      p2.innerHTML = input3.value
    }
<form action="" method="post">
    <input
        type="text"
        id="myInput1"
        onkeyup="myChangeFunction(this)"
        placeholder="FIRST "
      />`

    <input
        type="text"
        id="myInput3"
        onkeyup="myChangeFunction1(this)"
        placeholder="SECOND "
      /><br />
<select>
    <option id="option1">????? Here insert the value obtained at myInput2</option>

    <option id="option2">??? Here insert the value obtained at myInput4</option>
  </select>
</form>