jquery动态隐藏和显示下拉菜单 [英] Jquery dynamic hide and show for drop down menu
本文介绍了jquery动态隐藏和显示下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法让下拉菜单动态显示标记为 style =display:none
的html代码块。
我有以下代码。
< script type =text / javascript>
$(\'select [name =questiontype] \')。change(function(){
if($(this).val()==multiple );
alert(在选项倍数上调用do something函数);
else
alert(在选项编程中调用do something function);
});
< / script>
< form action =addQuestion.phpmethod =post>
< select name =questiontype>
< option name =questiontypevalue =multipleclick =return showMultiple();> Multiple Choice< /选项>
< option selected name =questiontypevalue =programmingclick =return showProgramming();> Programming< /选项>
< / select>< br>
< input type =hiddenname =coursevalue ='。$ course。'/>
< div id = \'multiple\'style =display:none>
多个
< / div>
< div id = \'programming\'style =display:none>
编程
< / div>
< / form>
我尝试了这些函数来从下拉菜单中显示div的id,但没有运气,我不确定我做错了什么。我还删除了div id块中的一些代码,以便于阅读。
< script>
function showMultiple(){
$('#multiple')。show();
$('#programming')。hide();
返回false;
}
function showProgramming(){
$('#multiple')。hide();
$('#programming')。show();
返回false;
}
< / script>
解决方案
< select id =selectMe>
< option value =multiple>多个< / option>
< option value =programming>编程< / option>
< / select>
< br>< br>< br>
< div id =multipleclass =group>
多个
< / div>
< div id =programmingclass =group>
编程
< / div>
JS
< pre $ $(document).ready(function(){
$('。group')。hide();
$('#multiple')。 (); $ b $('#'); $('#'这个).val())。show();
})
});
I am having trouble making my drop down menu dynamically show blocks of html code which are labelled style="display:none"
.
I have following code.
<script type="text/javascript">
$(\'select[name="questiontype"]\').change(function(){
if ($(this).val() == "multiple")
alert("call the do something function on option multiple");
else
alert("call the do something function on option programming");
});
</script>
<form action="addQuestion.php" method="post">
<select name="questiontype">
<option name="questiontype" value="multiple" click="return showMultiple();">Multiple Choice< /option>
<option selected name="questiontype" value="programming" click="return showProgramming();">Programming< /option>
</select><br>
<input type="hidden" name="course" value="'.$course.'" />
<div id=\'multiple\' style="display:none">
Multiple
</div>
<div id=\'programming\' style="display:none">
Programming
</div>
</form>
i tried these functions to .show() the div's by id from the dropdown menu but no luck and I'm not sure what I'm doing wrong. I also removed some code in the div id blocks to make it easier to read.
<script>
function showMultiple(){
$('#multiple').show();
$('#programming').hide();
return false;
}
function showProgramming(){
$('#multiple').hide();
$('#programming').show();
return false;
}
</script>
解决方案
HTML
<select id="selectMe">
<option value="multiple">multiple</option>
<option value="programming">Programming</option>
</select>
<br><br><br>
<div id="multiple" class="group" >
Multiple
</div>
<div id="programming" class="group" >
Programming
</div>
JS
$(document).ready(function () {
$('.group').hide();
$('#multiple').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
这篇关于jquery动态隐藏和显示下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文