2017-10-11 43 views
0

我正在與被互相連接2個選擇列表,所以我要的是一個接口的選擇值:改變在PHP

如果用戶選擇在類別下拉框的第二選擇列表中的選項將顯示該類別中的所有選項。

<hmtl> 
<label>Section</label> 
<select class="form-control selcls" name="txtsection" id="txtsection" >                     
<?php 
while ($rows = mysqli_fetch_array($queryResultsec)) { ?> 
<option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
$rows['Section_Name'];?></option> 
<?php } 
      ?>    
    </select> 


<label>Section</label> 
<select class="form-control selcls" name="txtsection" id="txtsection" > 
<?php 
while ($rows = mysqli_fetch_array($queryResultsec)) {?> 
<option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
$rows['Section_Name'];?></option> <?php } 
      ?>    
    </select>  
</hmtl> 
+0

提供的代碼你試過@Jeremy克魯茲 –

+0

你可以使用AJAX它。 – javidrathod

+0

你是否使用數據庫所以顯示你的代碼來幫助 –

回答

0

我花了一些根據您的問題寫一些代碼。在寫這篇文章的時候,我假設你在存儲類別和選項的兩個表格之間有關係。我假定關係使用「Gradelvl_ID」。我還假設你在JavaScript,JQueryAJAX有一些知識。

因此,基於我創建了下面的代碼。

這將是您的選擇區域。

<hmtl> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <label>Section</label> 
     <select class="form-control selcls" name="txtsection" id="cat" > 
      <?php 
       while ($rows = mysqli_fetch_array($queryResultsec)) { ?> 
        <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option> 
      <?php } ?> 
     </select> 
    <label>Section</label> 
     <select class="form-control selcls" name="txtsection" id="options" ></select> 
    </body>  
</html> 

此腳本使用jQuery,因此您需要將jQuery庫鏈接到上面的頁面。你也可以在第一頁使用<script></script>標籤或者作爲.js文件拼寫這個腳本。

$(document).ready(function(){ 
    $(document).on('change', '#cat', function(){ 
     $.ajax({ 
      url: 'getOptions.php', 
      type: 'get', 
      data: { 
       catId: $(this).prop('id') 
      } 
     }).then(function (response) { 
      $('#options').html(response); 
     }); 
    }); 
}) 

上面的代碼將選定的ID發送到getOptions.php其中將包含PHP根據從您選擇表發送ID號選擇的所有選項。然後,如果選擇成功,它將發回數據,這些數據將被上述AJAX代碼捕獲,並在第二個下拉列表中繪製選項。

<?php 
include_once('dbconnect.php'); 

//I'm not a big mysqli user 
if(!empty($_GET["id"])){ 
    $results = $conn -> prepare("SELECT * FROM <your table name> WHERE id = ?"); 
    $results -> bind_param('i', $_GET["id"]); 
    $results -> execute(); 
    $rowNum = $results -> num_rows; 

    if ($rowNum > 0){ 
     while($optRows = $results -> fetch_assoc()){ ?> 
      <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option> 
     <?php 
     } 
    } 
}?> 

另外要注意上面的代碼我使用預處理語句非常好習慣中來關注一下吧here

正如我說我是假設的代碼的某些部分,並使用您和我提供的信息希望您能做更多的研究並使上述代碼適合您。

如果這個工程,我想請你給我投票了,並標記這個答案作爲問題選擇的答案。

+0

我可以詢問執行查詢的部分嗎?我怎麼知道「?」的含義它應該是你得到的價值「$ _GET('id') –

+0

哦,查詢中的'?'是一個佔位符,它的值由'bind_param('i',$ _GET [」id「 ]''bind_param'中的'i'是數據類型,如果它是一個字符,那麼''''讀取關於他準備好的語句的數據類型,你也應該習慣使用預先準備好的語句,因爲它更安全 – Sand

+0

我認爲你在部分「var catid =;」部分有錯誤假設是它的值 –

0

試試這個代碼:

$("#select1").change(function() { 
 
    if ($(this).data('options') === undefined) { 
 
    /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
 
    $(this).data('options', $('#select2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
 
    $('#select2').html(options); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="select1" id="select1"> 
 
     <option value="1">Fruit</option> 
 
     <option value="2">Animal</option> 
 
     <option value="3">Bird</option> 
 
     <option value="4">Car</option> 
 
    </select> 
 

 

 
<select name="select2" id="select2"> 
 
     <option value="1">Banana</option> 
 
     <option value="1">Apple</option> 
 
     <option value="1">Orange</option> 
 
     <option value="2">Wolf</option> 
 
     <option value="2">Fox</option> 
 
     <option value="2">Bear</option> 
 
     <option value="3">Eagle</option> 
 
     <option value="3">Hawk</option> 
 
     <option value="4">BWM<option> 
 
    </select>

+0

我已經嘗試過這段代碼,我認爲這隻適用於靜態數據,我需要的是根據我的數據庫動態更改 –

+0

您需要調用ajax並獲取Json數據作爲響應,並設置第二個選擇下拉列表的HTML。 – javidrathod

+0

你必須在這裏分享你的代碼,所以我可以提供更好的解決方案 – javidrathod

0

做一件事 1,保持你的第二個下拉空。 2 - 調用jquery ajax獲取第一個下拉值的變化 創建一個新的頁面,其中只有db連接被處理後,sql處理相對於第一個下拉選擇值的sql 3 - 獲取對ajax方法的響應並獲取輸出