JS选择框功能问题答案

【问题标题】：Problem with JS Selectbox FunctionJS选择框功能问题
【发布时间】：2010-03-27 11:30:26
【问题描述】：

我有一个包含三个选项的选择框。当用户选择三个选项之一时，我希望在其下方显示一个特定的 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>

【问题讨论】：

标签： javascript html forms

【解决方案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]();
  });
});

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

【讨论】：

我不确定这应该如何工作 - selectmenu.value 返回什么？所选选项的价值？我插入了这段代码，但我可以让它工作 - 我需要将它与某种 onChange 触发器放在一起吗？
jQuery change 函数是 onChange 处理程序。 this.value 应该返回选择框的值。问题是我错过了 id 选择器的哈希值；现已修复。
所以我可以插入我想要的函数来代替：function() {alert('One!');}
太棒了，我明白了！ - 谢谢

【解决方案2】：

我认为您可以使用列表和表格中项目的位置来获取此信息，只要这些相对位置相同即可。更改 DIV 上的类，使其全部为 subTableDiv。

$(function() {
    $('#customfields-s-18-s').change( function() {
         var selected = $(this).find('option:selected');
         var position = $(this).find('option').index(selected);
         // hide all then show the nth one
         $('.subTableDiv').hide().eq(position).show();
    });
});

【讨论】：

酷，当每个选项被选中时，这会显示正确的 div，但是有没有办法可以定义默认显示哪个选项/div？现在所有三个 div 都显示了，但我想设置它以便第一个选项/div 是唯一显示的。
默认在其他 div 上设置样式 display: none。它可能会变得有点棘手，因为您将它们包裹在桌子上。我不确定隐藏 div 时表格行将如何显示，因为我不知道 CSS 的其余部分是什么样的。您可能需要/想要调整它以显示/隐藏行。

【解决方案3】：

看起来选择选项值与 div 的 ID 相同。您可以使用它来定义一个基本上显示与所选选项的值具有相同 id 的 div 的函数。还将每个 div 上的类更改为 subtableDiv。

$("#customfields-s-18-s").change(function() {
    // hide all divs
    $('.subtableDiv').hide();
    // show matching div
    var value = $(this).val();
    $('#' + value).show();
}

【讨论】：