2016-08-13 5 views
3

coursesPHPで動的なドロップダウンリストを作成するには?

courseID courseName 
    1 Diploma-Polytechnic 
    2 UG-Bachelor of Architecture (B.Arch) 
    3 UG-Bachelor of Engineering (B.E) 
    4 UG-Bachelor of Technology (B.Tech) 
    5 PG-Master of Architecture (M.Arch) 

表Iは私が第一ドロップダウンリストのすべてのコースを取得することができたした溶液をたいbranch

branchID courseID branchName 
1    1 Civil Engineering 
2    1 Computer Sci & Technology 
3    1 Electrical Engineering 
4    2 E&TC 
5    2 Mechanical Engineering 

そして、私のコード

<select name="courseName"> 
     <option value="">Select Courses</option> 
    <?php $sql = "SELECT * FROM courses "; 
    $res = mysql_query($sql) or die(mysql_error()); 
    while($row=mysql_fetch_assoc($res)) { 
     ?> 
    <option value=""><?php echo $row['courseName']; ?></option> 
    <?php } ?> 
    </select> 

セカンド私がこのようなことをしたいので、ドロップダウンリストは空のままです。

ユーザーが最初のドロップダウンから1つのコースを選択した場合、その関連コースの2番目のドロップダウンリストのブランチテーブルから自動的にデータを取得する必要があります。この

 <select name="sDepartment"> 

    <option value="">Department You Study</option> 
    <option value=""> </option></select> 

ための条件は、例えば、ユーザが続いて第二のドロップダウンリストのオプションplzは私を提供

Civil Engineering 
Computer Sci & Technology 
Electrical Engineering 

可能であればを持つべき第一のDropDownListからID1Diploma-Polytechnicを選択した場合なら、彼らのであれば良いだろう私のコードと互換性のあるJS/AJAXコード。

+0

は、いくつかのJavaScriptを使用:私はjQueryとAJAXについて学び、それはまだ動作を確認するために投稿する前にもう一度、このソリューションをテストする前に

  • は、私は長い時間前にこれを建てました。 –

  • +1

    あなたはAjaxを試す必要があります。 –

    +0

    これは、Ajaxリクエストで行うことも、別のドロップダウンですべての値を取得し、JSを使用して特定のものだけを表示することもできます。 –

    答えて

    0

    あなたはAjaxを使用する必要があります:あなたのPHPコードに選択されたオプションの値を掲示するJavaScript関数を呼び出して、あなたの最初の選択の変更に

    を、この1は、例えば、対応する値の配列を返す必要があります送信された値に設定します。選択の場合は1

    を変更します。そして、PHPコードに値を掲載しますあなたの関数を呼び出す:結果とあなたの選択2を取り込みます。

    非常に簡単なJQueryを使用できます。

    POST:https://api.jquery.com/jquery.post/

    変更を聞く:https://api.jquery.com/change/

    0

    あなたが定期的にJavaScriptで別のリストを設定することができアヤックスを使用したくない場合は、スクリプトタグ内のページがロードされ、その後、最初のドロップダウンの 'onchange'には、選択の内容を必要な既成グループのいずれかに切り替えることによって、2番目のドロップダウンの内容が変更されます。

    基本的に、最初のドロップダウンが変更されたときに必要に応じてドロップダウンリストを再構築するjavascript関数の2番目のドロップダウンには、さまざまなオプションがあります。

    これはjavascript、PHP、およびmysql(既に使用している)の組み合わせを必要とし、AjaxやjQueryをまったく必要としません。

    たとえば、これを使用して、最初のselect文をonChangeで設定します。値は、それが関数に値を送信する(と私たちはgetElementByIdを使用できるように、同様にIDを設定することを忘れないでください)変更したときように:

    <select name="courseName" id="courseName" onChange="setBranchList(this.value)" > 
    

    courseName select文に関する重要な注意事項 - 例で提供各オプションの '値'は空です。このソリューションが機能するように設定されていることが重要です。このように:

    <option value="<?php echo $row['courseID']; ?>"><?php echo $row['courseName']; ?></option> 
    

    2番目のドロップダウンのための選択は、(IDを設定する必要がある)のようであり得る:

    <select name="sDepartment" id="sDepartment"> 
    

    次いで、いくつかのPHPを使用してこのようなJS機能を有するネスト内のwhileループ外側のループの最初のドロップダウンのすべての値を選択し、内側のループの2番目のドロップダウンの可能なすべての値に対するbuild文を作成します。

    <script type="text/javascript"> 
    function setBranchList(courseID) 
    { 
        var selector_to_fill = document.getElementById("sDepartment"); 
        selector_to_fill.options.length = 0; 
    
        <?php 
    
        $course_query = "SELECT * FROM courses ORDER BY courseID"; 
        $course_result = mysql_query($course_query); 
    
        while ($course_detail = mysql_fetch_array($course_result)) 
        { ?> 
    
         if (courseID == '<?php echo $course_detail['courseID']; ?>'){ 
    
         <?php $list_count = 0; 
    
          $branch_query = "SELECT * FROM branch WHERE courseID = '$course_detail[courseID]' ORDER BY branchID"; 
          $branch_result = mysql_query($branch_query); 
    
          while ($branch_detail = mysql_fetch_array($branch_result)) 
          { ?> 
    
           selector_to_fill.options[<?php echo $list_count; ?>]=new Option("<?php echo $branch_detail['branchName']; ?>", "<?php echo $branch_detail['branchID']; ?>", false, false); 
    
           <?php 
    
           $list_count++; 
    
          } ?> 
         } 
        <?php 
        } ?> 
    } 
    </script> 
    

    ユーザーが自分のページにアクセスすると、PHPはそう何ユーザーが得ることになりますいくつかのJavaScriptで、ユーザーに送信する前に、あなたのDBにどんなのに基づいてsetBranchList関数のIF文のシリーズを出し構築しますこのような:

     if (courseID == '1'){ 
    
          selector_to_fill.options[0]=new Option("Department You Study", "", false, false);     
    
           selector_to_fill.options[1]=new Option("Civil Engineering", "1", false, false);   
    
           selector_to_fill.options[2]=new Option("Computer Sci & Technology", "2", false, false);   
    
           selector_to_fill.options[3]=new Option("Electrical Engineering", "3", false, false);    
              } 
    
         if (courseID == '2'){   
    
          selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
    
           selector_to_fill.options[1]=new Option("E&TC", "4", false, false);   
    
           selector_to_fill.options[2]=new Option("Mechanical Engineering", "5", false, false);    
              } 
    
         if (courseID == '3'){   
    
          selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
             } 
    
         if (courseID == '4'){   
    
          selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
             } 
    
         if (courseID == '5'){   
    
          selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
             } 
         } 
    

    この例に関する注意:

    • 'selector_to_fill.options.length = 0;'関数呼び出し時に2番目のリストからすべてのオプションをクリアする

    • リストはDOMを使用して'new Option'で作成されます。

    • selectステートメントの各オプションは0から始まるインデックスを必要とするため、php $ list_count変数が使用されます。この変数は各アイテムのインデックスを表し、インデックスが常に正しくインクリメントされるようにループごとにリセットされます。 P

    関連する問題