title: select from dropdown and show details from database using php
body: <p><strong>i already search for this question but the result is a litte confusing because today is my first time to encounter ajax and most answer is ajax. so i decided to post a question which is my work and trying to have someones help from here to guide me about ajax. this is for my project need some help please</strong></p>
  
  <p>this is my query for getting the values from database and display it to my dropdownlist</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  include('config.php');
  
      $sql="SELECT food FROM menu";
      $lists=mysql_query($sql);
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is my dropdown list... i fetch data from my database to have my values in dropdown list<a href="https://i.stack.imgur.com/wk33w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wk33w.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="fname" id='mySelect' value='Foodname'&gt;
          &lt;?php
                      while($food = mysql_fetch_array($lists)) {
                         echo '&lt;option value='.$food['food'].'&gt;'.$food['food'].'&lt;/option&gt;'; 
                      }
                      echo '&lt;/select&gt;';
  
          ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>now i want to show the price of the selected food in the dropdown list.. i want it to show in input text so i am able to edit it if i want to</p>
  
  <p><a href="https://i.stack.imgur.com/ObAUW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ObAUW.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' class="form-control" name='prc'&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is my database
  <a href="https://i.stack.imgur.com/z6ise.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z6ise.png" alt="enter image description here"></a></p>