Jquery动态隐藏和显示下拉菜单

Question

我无法使我的下拉菜单动态显示标记的html代码块style="display:none".

我有以下代码.

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

Answer 1

演示

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();
    })
});