magento2:当我更改下拉列表时，如何从数据库中检索数据？

我已经创建了一个用于窗口计算的客户模块，有一个下拉列表，我们可以在我的.phtml文件中选择颜色，如下所示

<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>

如果我从我的下拉菜单中选择某些内容，它将更改该值.我在我的.js文件中使用了类似下面的jQuery敌人

//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);

现在我使用硬编码显示价格.这不是好方法所以我创建了一个像下面的数据库表

id      color     price_component
1       white     0
2       red       4
3       green     8
4       black     12

当我从下拉列表中选择某些内容时，如何从数据库表中获取值.有人可以告诉我如何一步一步