通过下拉菜单激活 Javascript 命令

Question

我刚开始使用 Javascript，我需要有关我正在从事的项目的帮助。我知道这个问题可能非常简单，但 Javascript 不是我的强项，我似乎无法自己找到我要找的东西。

我遇到的问题是我需要根据下拉菜单中可用的选项更改 3D 模型中呈现的内容。我刚刚设法获得用于更改 Material 的下拉菜单，但我需要弄清楚如何使其与同一个下拉菜单中的多种 Material 一起使用。

这是我现在拥有的:

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");
 });

Currently, as is, the script changes from the base material to "Silver 1"when any option on the drop down menu is selected.当我在下拉菜单中选择“黄铜”时，我希望它显示 Material “Gold 1”，而当我从下拉菜单中选择“Silver”时只显示“Silver 1”。

此外，应该注意我使用的是 existing API for the 3D rendering company, Lagoa 的派生词.

[编辑:]

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

还应该注意的是，我从旧形式的代码中获得了“Gold 1”和“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");
 });

Answer 1

您将“Silver 1”硬编码为要提交的选项。

您希望从哪里获得“Gold 1”？我在您的代码中没有看到它。

Dementic 给出了正确答案，这是它的样子。

例如:

<option value="Silver 1" id="silver">Silver</option>
<option value="Gold 1 " id="brass">Brass</option>

和你的js:

$( "#js-mat-sel > select" ).bind( "change", function matchange(){
    lapi.applyMaterialToMeshByName( $(this).val(), "Group28884");
 });

请注意选项值包含您发送的实际值。

编辑:您在 div 上使用 .val()，但它只能用于输入/表单元素(即选择元素)。您应该修改更改事件以绑定(bind)到选择元素，如下所示:http://jsfiddle.net/6YBpp/

您还可以更改选择器以选择该 div 的“选择”子元素，我更新了答案以显示...无论哪种方式，范围都不正确