4

ドロップダウン メニューに というラベルの付いた 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>

これらの関数を .show() ドロップダウン メニューから id で div を試してみましたが、うまくいかず、何が間違っているのかわかりません。また、読みやすくするために、div id ブロックのコードをいくつか削除しました。

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

3 に答える 3

9

デモ

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();
    })
});
于 2013-10-16T04:42:05.137 に答える
1

あなたの代わりにselect option使用していますclickonclick 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(){
于 2013-10-16T04:35:50.573 に答える
0

これを試して：

<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>
于 2013-10-16T05:00:18.520 に答える