问题与JS选择框功能

我有一个选择框有三个选项。当用户选择三个选项中的一个时，我想要一个特定的div出现在它下面。我试图编写代码，指定在选择三个选项中的每一个时出现哪个特定框。到目前为止，我只处理与第一个选项有关的代码。但是，只要用户从选择框中选择了三个选项中的任何一个，就会触发第一个选项的功能，并显示div。问题与JS选择框功能

我的问题是两个部分： 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>

来源

2010-03-27 Thomas

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

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

来源

2010-03-27 11:53:32

我不知道这是如何suppossed工作 - selectmenu.value返回什么？所选选项的值？我插入了这段代码，但我可以让它工作 - 我需要将它与onChange触发器放在一起吗？ – Thomas 2010-03-27 12:04:26

jQuery'change'函数是onChange处理函数。 'this.value'应该返回选择框的值。问题是我错过了ID选择器的哈希值;现在修好。 – 2010-03-27 12:09:22

所以我可以插入我想要的功能： function（）{alert（'One！'）;} – Thomas 2010-03-27 12:13:16

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

来源

2010-03-27 11:49:04 tvanfosson

很酷，这显示正确的div时，每个选项被选中，但有没有一种方法，我可以定义默认显示哪个选项/ div？现在，所有三个div都显示出来，但我想设置它以便第一个选项/ div是唯一显示的。 – Thomas 2010-03-27 11:55:06

默认情况下，在其他div上设置样式'display：none'。它可能会有点棘手，因为你把它们包装在一个表中。我不确定当div隐藏时表格行将如何显示，因为我不知道CSS的其余部分是什么。您可能需要/想要调整它来显示/隐藏行。 – tvanfosson 2010-03-27 12:15:19

它看起来像选择选项的值是与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(); 
}

来源

2010-03-27 11:59:18 Anurag

问题与JS选择框功能

回答

相关问题