jquery动态隐藏和显示下拉菜单 [英] 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（在选项倍数上调用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> 
  

解决方案

demo

HTML

 < 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>

解决方案

demo

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屋！