基於第一個下拉結果填充第二個下拉列表

我知道這個問題之前已經被問過，但是，我似乎並不知道如何應用在我的方案中。我在MySQL中得到了一個表格，稱爲科目，它由科目名稱和科目級別組成。基於第一個下拉結果填充第二個下拉列表

例如：

Subject Name, Subject Level 
(Maths,P1) 
(English, P2) 
(Science,P1) 
(English,S3)

我的問題是，如果用戶在第一個下拉菜單中選擇主題水平下降，請問第二個下拉顯示它由主題名稱？

例如，如果用戶在第一個下拉列表中選擇P1，它將只顯示數學和科學。

在此先感謝！

來源

2015-12-27 John

嘗試學習Ajax。 http://www.w3schools.com/ajax/ajax_examples.asp –

您可能想要將Ajax與後端腳本結合使用來執行此操作。 ajax函數將作爲偵聽器附加到第一個下拉菜單上 - 當用戶從菜單中選擇一個項目時，ajax函數將請求發送到構建和執行sql語句的後端腳本。查詢結果被髮送回javascript函數，該函數使用回調函數處理數據（回調會生成第二個菜單的內容）〜至少，這是一種方法！ – RamRaider

任何參考例子？ :) – John

我現在要寫下這個過程如何完成，然後你將不得不爲你不明白的部分找到教程。

所以： 1步：從數據庫中獲取的水平，併產生水平的下拉列表：

<select id="level"> 
    <option value="p1">p2</option> 
    <option value="p2">p2</option> 
</select>

2步：準備選擇框主題：

<select id="subjects" style="display:none"> //this field should be hidden first 
</select>

3步：使用jQuery，爲「級別」選擇框添加監聽器（這意味着每次用戶選擇任何級別（p1，p2 ...）時都會執行此功能：

<script> 
    $('#level').on('change', function() { //this chunk of code will be executed every time user reselects level value 
    var selected = $(this).val(); //this is the value of selected level 

    //here starts ajax method to communicate with server 
    $.ajax({ 
    method: "POST", 
    url: "getSubjectByLevel.php", 
    data: { level: selected } //level is variable that will passed to getSubjectByLevel.php. You can get it in php file using $_POST["level"] and according this value generate sql query that will return only subject with this "level". Then you will have to generate array out of these subjects and return using normal "echo ArrayName" statement. 
    }) 
    .done(function(subjects) { //subjects is array of subjects returned from getSubjectByLevel.php 
     var selectBoxHtml = ''; 
     for(i =0; i< subjects.length; i++){ 
     selectBoxHtml += '<option value='+subjects[i]+'>'+subjects[i]+'</option>'; 
     } 
     $("#subjects").html(selectBoxHtml); //put generated select box options in prepared earlier subjects select box 
     $("#subjects").show(); //appear subjects select box which was hidden initially 
    }); 
    }); 
</script>

這是一種實現你想要的一般算法。如果您有關於細節或概念問題的問題，您無法理解，請隨時詢問。

來源

2015-12-27 10:52:44

謝謝你的幫助！ :) – John

使用ajax構建第二個下拉菜單的鏈接選擇菜單的示例。這種方法可以擴展到包括許多下拉菜單，但是這應該給你一個關於如何實現這個的好主意。這個例子中沒有涉及到sql，只是一個仿真。

<?php 
    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     /* 
     this might be a totally separate script in reality 
     but for demo purposes the ajax function will send the 
     requests to the same page that has the html form on. 
     */ 

     /* 
      Here you would intercept the value being POSTed by the ajax function 
      and construct then execute your sql. The response will then be sent back 
      to the callback function. 
     */ 

     $posted_value=$_POST['q']; 

     for($i=0; $i < 20; $i++) echo "<option value=$i>".$posted_value.'_'.$i; 

     /* As it is the same page we want to stop here */ 
     exit(); 
    } 
?> 

<!doctype html> 
<html> 
    <head> 
     <title>Chained Select Menu using ajax</title> 
     <script> 

      /* Very basic ajax function */ 
      function ajax(m,u,p,c){ 
       /* 
        m=method 
        u=url 
        p=params {name:value} 
        c=callback 
       */ 
       var xhr=new XMLHttpRequest(); 
       xhr.onreadystatechange=function(){ 
        if(xhr.readyState==4 && xhr.status==200)c.call(this,xhr.response); 
       }; 

       var params=[]; 
       for(var n in p)params.push(n+'='+p[n]); 

       switch(m.toLowerCase()){ 
        case 'post': 
         p=params; 
        break; 
        case 'get': 
         u+='?'+params; 
         p=null; 
        break; 
       } 

       xhr.open(m.toUpperCase(), u, true); 
       xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
       xhr.send(p); 
      } 

      /* Event listener - attached to select menu */ 
      function getdata(n){ 
       ajax.call(this, 'POST', document.location.href,{ q:n }, cbgetdata); 
      } 

      /* callback function that processes response data */ 
      function cbgetdata(r){ 
       document.getElementById('menu_2').innerHTML=r; 
      } 

     </script> 
    </head> 
    <body> 
     <form name='geronimo'> 

      <h1>Chained Dropdown menus</h1> 

      <select name='menu_1' onchange='getdata(this.value)'> 
       <option value='AL'>AL</option> 
       <option value='AK'>AK</option> 
       <option value='AZ'>AZ</option> 
      </select> 

      <select name='menu_2' id='menu_2'></select> 
     </form> 
    </body> 
</html>

來源

2015-12-27 10:22:19 RamRaider

非常感謝！ :) – John

如果它解決了問題，或者至少幫助你解決了問題，也許你可以接受答案 – RamRaider

基於第一個下拉結果填充第二個下拉列表

回答

相關問題