jquery動態隱藏並顯示下拉菜單

我有麻煩讓我的下拉菜單動態顯示標記爲style="display:none"的html代碼塊。jquery動態隱藏並顯示下拉菜單

我有以下代碼。

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

我試過這些功能.show（）div的ID從下拉菜單，但沒有運氣，我不知道我做錯了什麼。我還刪除了div id塊中的一些代碼，以便於閱讀。

<script> 
     function showMultiple(){ 
      $('#multiple').show(); 
      $('#programming').hide(); 
      return false; 
     } 
     function showProgramming(){ 
      $('#multiple').hide(); 
      $('#programming').show(); 
      return false; 
     } 
</script>

來源

2013-10-16 Garvin

不錯答案.......！ –

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>

$(document).ready(function() { 
    $('.group').hide(); 
    $('#multiple').show(); 
    $('#selectMe').change(function() { 
     $('.group').hide(); 
     $('#'+$(this).val()).show(); 
    }) 
});

來源

2013-10-16 04:42:05 Ashish

這隱藏了div id =「programming」塊，但更改函數對我無能爲力 – Garvin

此JS假定#multiple將始終選擇一個，忽略html自動填充數據或可能的用戶設置數據。你會想靜靜地設置顯示的第一個div。 – Chausser

我的意思是當我從下拉菜單中選擇編程時，沒有任何變化。 – Garvin

在你selectoption您使用click代替onclickevent

<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(){

來源

2013-10-16 04:35:50

我之前已經onclick，但它仍然沒有顯示。我讓他們逃脫的原因是因爲這全部在一個php文件中。 – Garvin

即使在PHP中也沒有必要逃跑 – Aris

@Aris你需要用PHP來逃避它們，**如果你做了類似'echo'Sam'house'的東西;否則回聲會在m 。 @Garvin如果你用引號而不是撇號使用echo，這將起作用：'回聲「山姆的房子」;'。只是想澄清，任何人在未來閱讀此。 –

試試這個：

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

將此代碼放入洗腦區中：

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

來源

2013-10-16 05:00:18

jquery動態隱藏並顯示下拉菜單

回答

相關問題