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

我认为你可以使用列表和表格中项目的位置来获得这个，只要这些相对位置是相同的。更改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();
    });
});

Answer 2

您可以使用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]();
  });
});

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

Answer 3

看起来select选项值与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();
}

JS Selectbox功能问题

3 个答案: