用户从下拉菜单中选择下拉菜单选项后如何防止其重置为初始设置

Question

	$("#packID").on("change", function() {
		

		$("#packID").off('change');

		$("#text1").val($(this).find("option:selected").attr("value"));  
    }); 
    
 $("#numRowID").on("change", function() {
        $("#text2").val(this.value );
    });

.quesTable {
  width: 100%;
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
td, th {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.legendl {
  text-align: center;
}

packID, numRowID {
height: 30px;
}

.fRowClass {
//display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="quesTable">
  <tr style="background-color:#bcbcbc;">
  	<th>Brand A</th>
    <th>Brand B</th>
    <th>This drop down selection should not reset on any event it should only get change on user selection only</th> 
    <th>This nselection should not reset on any event it should only get change on user selection only</th>
  </tr>
  <tr>
    <td class="legendl">Hello</td>
    <td class="legendl">Hi</td>
    <td>
    <div class="dropDownContainer">
      <select id="packID">
        <option value="">header</option>
        <option value="1">Individual</option>
        <option value="2">pack1</option>
        <option value="3">pack2</option>
        <option value="4">pack3</option>
        <option value="5">pack4</option>
        <option value="6">pack5</option>
        <option value="7">pack6</option>
        <option value="8">pack7</option>
        <option value="9">pack8</option>
        <option value="10">pack9</option>
        <option value="11">pack10</option>
        <option value="12">pack11</option>
        <option value="13">pack12</option>
        <option value="14">pack13</option>
      </select>
    </div>
    </td> 
    <td>
    <div class="numberContainer">
      <input type="number" min="1" max="10" step="1" id="numRowID">

    </div>
    </td> 
  </tr>
  
</table>

	  <input type="number" id="text1" min="1" max="10" step="1" id="numRowID">
	  <input type="number" id="text2" min="1" max="10" step="1" id="numRowID">
	<button type="submit" id="submit1">Submit</button>

我有一个下拉菜单和一个数字容器。但是我不希望这些重置。仅当用户正在更改时，它才应该更改。下拉列表和数字字段都需要回答，但是如果仅选择下拉列表而不是数字字段，并且如果不小心按下了提交按钮，则它应该保留该值。数字字段也是如此。有帮助吗？

$("document").ready(function() {
    $("#packID").on("change", function() {


        $("#packID").off('change');

        $("#text1").val($(this).find("option:selected").attr("value"));
    });

    $("#numRowID").on("change", function() {
        $("#text2").val(this.value);
    });

    $('#submit1').click(function() {
        location.reload();
    }

$("document").ready(function() {
	$("#packID").on("change", function() {
		

		$("#packID").off('change');

		$("#text1").val($(this).find("option:selected").attr("value"));  
    }); 
  
 $("#numRowID").on("change", function() {
        $("#text2").val( this.value );
    });

$('#submit1').click(function() {
    location.reload();
});
});

.quesTable {
  width: 100%;
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
td, th {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.legendl {
  text-align: center;
}

packID, numRowID {
height: 30px;
}

.fRowClass {
//display: none;
}

<table class="quesTable">
  <tr style="background-color:#bcbcbc;">
  	<th>Brand A</th>
    <th>Brand B</th>
    <th>This drop down selection should not reset on any event it should only get change on user selection only</th> 
    <th>This nselection should not reset on any event it should only get change on user selection only</th>
  </tr>
  <tr>
    <td class="legendl">Hello</td>
    <td class="legendl">Hi</td>
    <td>
    <div class="dropDownContainer">
      <select id="packID">
        <option value="">header</option>
        <option value="1">Individual</option>
        <option value="2">pack1</option>
        <option value="3">pack2</option>
        <option value="4">pack3</option>
        <option value="5">pack4</option>
        <option value="6">pack5</option>
        <option value="7">pack6</option>
        <option value="8">pack7</option>
        <option value="9">pack8</option>
        <option value="10">pack9</option>
        <option value="11">pack10</option>
        <option value="12">pack11</option>
        <option value="13">pack12</option>
        <option value="14">pack13</option>
      </select>
    </div>
    </td> 
    <td>
    <div class="numberContainer">
      <input type="number" min="1" max="10" step="1" id="numRowID">

    </div>
    </td> 
  </tr>
  
</table>

	  <input type="number" id="text1" min="1" max="10" step="1" id="numRowID">
	  <input type="number" id="text2" min="1" max="10" step="1" id="numRowID">
	<button type="submit" id="submit1">Submit</button>