我有一个选择框有三个选项。当用户选择三个选项中的一个时,我想要一个特定的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>
我不知道这是如何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