javascript - JS Selectbox 函数的问题

Question

我有一个包含三个选项的选择框。当用户选择三个选项之一时，我希望在其下方显示一个特定的 div。我正在尝试编写代码来指示在选择三个选项中的每一个时要显示哪个特定框。到目前为止，我只研究了与第一个选项相关的代码。但是，每当用户从选择框中选择三个选项中的任何一个时，都会触发第一个选项的功能并显示 div。

我的问题分为两部分:1) 如何编写专门针对所选选项的条件函数

2)完成我上面描述的事情的最佳方法是什么？如何有效地为选择框中的三个不同选项定义三个不同的功能？

这是我正在为第一个选项开发的功能:

$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();

var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
 if (chosenoption.value ="Co-Op"){
     subTableDiv1.slideDown("medium");
     }
 }
});

HTML:

<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>

Answer 1

您可以使用selectmenu.value(或$(selectmenu).val())来获取所选选项的值，并且您可以将函数与使用对象的值。示例:

$(function() {
  var call_table = {
    'Condominium': function() {alert('One!');},
    'Co-Op': function() {alert('Two!');},
    'Condop': function() {alert('Three!');}
  };

  $('#customfields-s-18-s').change(function() {
    call_table[this.value]();
  });
});

当然，您不必内联定义函数。我在这里只是为了简洁而这样做。您可以在任何地方定义它们并通过名称引用它们。