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

I have succeeded to display the input value to another input using the HTML form. I want to display the input values in the selectoption elements instead of input 3 and 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 />

Above input are displayed in the below input fields.

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

But I want to display the above myinput2 myinput4 values in the below option values in select field when the input at myinput1 and myinput3 are typed.

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

CodePudding user response：

check it out

    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>