[英]Jquery dynamic hide and show for drop down menu
我無法使我的下拉菜單動態顯示標記為style="display:none"
的html代碼塊。
我有以下代碼。
<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>
我嘗試了這些函數來從。下拉菜單中顯示div的div,但沒有運氣,我不確定我做錯了什么。 我還刪除了div id塊中的一些代碼,以便於閱讀。
<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();
})
});
在您的select
option
您使用的是click
而不是onclick
event
<select name="questiontype">
<option name="questiontype" value="multiple" onclick="return showMultiple();">Multiple Choice</option>
<option selected name="questiontype" value="programming" onclick="return showProgramming();">Programming< /option>
</select>
並且不需要使用單引號轉義,
<div id='multiple' style="display:none">
Multiple
</div>
<div id='programming' style="display:none">
Programming
</div>
並在script
標記中
$('select[name="questiontype"]').change(function(){
嘗試這個:
<form action="addQuestion.php" method="post">
<select name="questiontype" id="questiontype">
<option value="multiple">Multiple Choice</option>
<option selected value="programming">Programming</option>
</select>
<br>
<div id='multiple' class="group" style="display:none">
Multiple
</div>
<div id='programming' style="display:none" class="group">
Programming
</div>
</form>
將此代碼放在head部分:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.group').hide();
$('#programming').show();
$('#questiontype').change(function () {
$('.group').hide(1000);
$('#'+$(this).val()).show(1000);
})
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.