Q:

How can I retrieve data from database when I change the drop down?

I have created a custome module for window calculation there is a drop down that we can select color in my .phtml file like below
<p><br>Frame Color</p>
<select id="color">
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Black">Black</option>
<option value="Wood limitation">Wood limitation</option>
</select>

<b><p id="framecolor"></p></b>

if i select something from my drop down it will change the value. I have used jQuery foe that like below in my .js file
//frame color calculation
        var color = jQuery('#color').val();

        if(color=="White"){
            var framecolor = (0);
        }
        else if(color=="Red"){
            var framecolor = (4);
        }
        else if(color=="Green"){
            var framecolor = (8);
        }
        else if(color=="Black"){
            var framecolor = (12);
        }
        else if(color=="Wood limitation"){
            var framecolor = (18);
        }
        jQuery("#framecolor").html("FrameColor Price: " + framecolor);

Now Im using hard coding for display price. Its not the good way so I created a database table like below 
id      color     price_component
1       white     0
2       red       4
3       green     8
4       black     12 

How can I get values from databse table when I select something from the drop down. Can someone tell me how to that step by step

A:

You can do it by AJAX. Please refer this answer to add AJAX in your module.
You can send Frame color as Ajax.data to your controller where you could get its value from the table and show back in your phtml.
Note: This would be your controller action path.
"AjaxUrl": "<?php echo $block->getAjaxUrl(); ?>"

