通过下拉菜单激活Javascript命令

我是使用Javascript的新手，我正在进行的项目需要帮助。我知道这个问题可能非常简单，但Javascript不是我的强项，我似乎无法独自找到我想要的东西。

我遇到的问题是，我需要根据下拉菜单中的选项更改3D模型中渲染的内容。我只是设法获得了下拉菜单来更改材质，但我需要弄清楚如何使用同一下拉菜单中的多个材质。

这是我现在拥有的：

HTML代码：

<div class="variant-option" id="js-mat-sel">
  <div class="variant-option-title">Finish: </div>
  <select data-variant-option-name="Finish">
    <option value="none">Select Finish</option>
    <option value="Silver" id="silver">Silver</option>
    <option value="Brass" id="brass">Brass</option>
  </select>
</div>
</div>

JS代码：

 $( "#js-mat-sel" ).bind( "change", function matchange(){
   lapi.applyMaterialToMeshByName( "Silver 1", "Group28884");
 });

目前，当选择下拉菜单上的任何选项时，脚本将从基本材质更改为"银色1"。当我在下拉菜单上选择"黄铜"时，我希望它显示材料"金色1"，当我从下拉菜单中选择"银色"时，只显示"银色1"。

此外，需要注意的是，我正在为3D渲染公司Lagoa使用现有API的衍生产品。

[编辑：]

所以，我知道我在这里做错了什么，我只是不知道如何正确地做我想做的事。

还应该注意的是，我从一个旧形式的代码中获得了"Gold 1"answers"Silver 1"，该代码通过多个CSS按钮实现了我想要的功能。以下是有效的代码。然而，按钮又大又不方便，将来我需要用更多的材料重新创建此代码，因此下拉菜单更理想。这是原始代码：

HTML:

<div class="btn-large" id="js-material-btn-1">Gold</div>
<div class="btn-large" id="js-material-btn-2">Silver</div>

JS:

 $( "#js-material-btn-1" ).bind( "click", function(){
   lapi.applyMaterialToMeshByName( "Gold 1", "Group28884");
 }); 
 $( "#js-material-btn-2" ).bind( "click", function(){
   lapi.applyMaterialToMeshByName( "Silver 1", "Group28884");
 });