单击时禁用值下拉列表

Question

I have code here. I can see that it's disabling but when it submit data it looks like it was refreshing and the disable value are being reset. What is wrong here? the onclick event is for the radio button for submitting vote. This dropdown list are fetching data that comes from the database which is position_name

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#position').change(function() {

  $("#position").prop("disabled", true);

});
 });
</script>

and this is the submit dropdown list.

      <script type="text/javascript">
   document.getElementById('position_name').value = "<?php echo $_POST['position'];?>";
  </script>
      <div id="container">
       <table width="420" align="center">
        <form name="fmNames" id="fmNames" method="post"  onclick="getPosition(this.value)">
       <tr>
     <td>Choose Position</td>
      <td>
   <SELECT NAME="position" id="position" onchange="form.submit()" onclick="getPosition(this.value)">
       <OPTION VALUE="select">select
       <?php 
          //loop through all table rows
           while ($row=mysql_fetch_array($positions)){
           echo "<OPTION VALUE=$row[position_name]>$row[position_name]"; 

     }
?>
</SELECT></td>
 </tr>
 </form> 

Answer 1

In your SELECT you have an onchange="form.submit()" that triggers the form to submit the data and subsequently redirect to the page it is meant to send the data to which in your case is the same page.

Remove the onchange event to stop the form submitting when you select a position.