通过下拉菜单激活Javascript命令

Question

我是Java语言的新手，我正在研究的项目需要帮助。 我知道这个问题可能非常简单，但是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”和“ 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”硬编码为提交的选项。

您希望从哪里获得“黄金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（），但只能在输入/表单元素（即select元素）上使用。 您应该将change事件修改为绑定到select元素，如下所示： http : //jsfiddle.net/6YBpp/

您也可以更改选择器以选择该div的“ select”子元素，我将答案更新为显示...范围不正确的任何一种方法