javascript - Populate text field based on the selected drop down value

I have the following PHP Code that outputs the query result (which is simply a mapping of a Product Name and its corresponding unit price) to a JSON file. The PHP code also populates the drop down list.

I have no problem in creating the JSON file and populating the drop down list. My main concern is this:

When the user selects a Product Name from the drop down list, how do I auto-populate another text field to display the Product's corresponding unit price?

Product Name

  

    
    
    

                    $connstring = pg_connect("host=localhost dbname=myDB user=postgres password=password")
            or die('Could not connect: ' . pg_last_error());
            $select = "SELECT p_name, unit_price FROM Product";

            $executeSelect = pg_query($select) or die('Postgresql: ' . pg_last_error());

            $result = array();

            while ($line = pg_fetch_array($executeSelect, null, PGSQL_ASSOC)) {

                $index = 0;
                foreach ($line as $col_value) {
                    if ($index % 2 == 0)
                    {

                        //Display Product Name in the drop down list
                        echo "
$col_value
";
                        $index++;
                    }
                    else
                    {
                        $index++;   
                    }



                }   
                //Store query output to the result array
                $result[] = $line;

            }

            //Save the query output to a JSON file
            file_put_contents('C:\Apache\htdocs\productList.json', json_encode($result), LOCK_EX);



            pg_free_result($executeSelect);
            pg_close($connstring);                                                              
        ?>
    
  

     


Unit Price