An example of getting selected value with $.get method

jQuery, CSS and HTML

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#getbtn").click(function(){ 
        var prodname = $('#selproduct :selected').text();
        $.get("getsingleprod.php", { ProductName: prodname },function(getresult){
        $("#presentprod").html(getresult);
        });
 });    
});

</script>

<style>
.demotbl {
    border: 0px solid #DE1F58;
  }
.demotbl th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border-bottom:3px solid #DE1F58;
    background-color:#DE1F58;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(222,31,88)),
        color-stop(0.51, rgb(240,147,174)),
        color-stop(0.87, rgb(248,203,217))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(222,31,88) 3%,
        rgb(240,147,174) 52%,
        rgb(248,203,217) 88%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
  }
.demotbl td{
    width:100px;
    padding:10px;
    text-align:center;
    vertical-align: top;
    background-color:#F8CBD9;
    border: 1px solid #F9D0DC;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#000;
    text-shadow:1px 1px 1px #fff;

  }
  
.divcls{
  background: #6A0432;
  width:420px;
  border-radius: 15px;
  padding:20px;
  font-size:18px;
  color:#fff;   
}  
#getbtn{
    background-color:#00BF60;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
	font-size: 15px;
    color: #000;
    letter-spacing: 0px;
    padding: 2px 3px;
    font-size: 14px;
    font-weight: normal;
    
    line-height: 1;
    text-decoration:none;
} 

</style>

</head>
<body>
 
<h3>A demo to get selected  value and use in $.get jQuery</h3>
<div class="divcls">
<label>Select a product</label>
<select id="selproduct">
      <option value="Wheat">Wheat</option>
      <option value="Rice">Rice</option>
      <option value="Sugar">Sugar</option>  
  </select>
<button id="getbtn">Load Product Data</button>  
</div>
<div id="presentprod"></div> 
</body>
</html>

The PHP code

< ?php
//Getting product name sent by Post method
$productname = $_GET['ProductName'];
//Change DB parameters and DB name as per yours
$dbhostname = 'localhost';
 
$dbusername = 'user_name';
 
$dbpassword = 'password';
 
$conn = mysql_connect($dbhostname, $dbusername, $dbpassword);
 
if(! $conn )
 
{
 
  die('Could not connect: ' . mysql_error());
 
}
 
//echo 'MySQL Connected successfully'."<BR>";
 
mysql_select_db("DBName") or die(mysql_error());
 
 
$sql_statemanet = "select * from tbl_products where Product_Name = '" .$productname ."'";
 
$rec_select = mysql_query( $sql_statemanet);
 
if(! $rec_select )
 
{
 
  die('Could not retrieve data: ' . mysql_error());
 
}
 
//Displaying fetched records to HTML table
 
echo "<table class='demotbl'>";
 
echo "<tr> <th>Product ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
 
// Using mysql_fetch_array() to get the next row until end of table rows
 
while($row = mysql_fetch_array( $rec_select )) {
 
                // Print out the contents of each row into a table
 
                echo "<tr><td>";
 
                echo $row['Product_ID'];
 
                echo "</td><td>";
                
                echo $row['Product_Name'];
 
                echo "</td><td>";

                echo $row['Product_Quality'];
 
                echo "</td><td>";
                
                echo $row['Product_Quantity'];
 
                echo "</td></tr>";                                
 
}
 
mysql_close($conn);
 
?>

A demo to get selected value and use in $.get jQuery

Select a product