PHP 2選擇選項始終與數據庫中的表行同步

Question

我有2個SelectOption，如果選擇了Select 1，則Select 2會自動與Select 1同步

從數據庫表中檢索所有SelectOptions內容。

SELECT 1＆2腳本：

 <select name="leavetype" autocomplete="off"> <option value="">Choose Leave Type</option> <?php $sql = "SELECT LeaveType from tblleavetype"; $query = $dbh -> prepare($sql); $query->execute(); $results=$query->fetchAll(PDO::FETCH_OBJ); $cnt=1; if($query->rowCount() > 0) { foreach($results as $result) { ?> <option value="<?php echo htmlentities($result->LeaveType);?>"><?php echo htmlentities($result->LeaveType);?></option> <?php }} ?> </select> <select name="rightsgranted" autocomplete="off"> <option value="">Rights Granted</option> <?php $sql = "SELECT RightsGranted from tblleavetype"; $query = $dbh -> prepare($sql); $query->execute(); $results=$query->fetchAll(PDO::FETCH_OBJ); $cnt=1; if($query->rowCount() > 0) { foreach($results as $result) { ?> <option value="<?php echo htmlentities($result->RightsGranted);?>"><?php echo htmlentities($result->RightsGranted);?></option> <?php }} ?> </select> 

例

Answer 1

您需要使用ajax來完成這項工作

這個例子是針對一個州的選擇城市

的index.php

    <?php
//Include the database configuration file
include 'dbConfig.php';

//Fetch all the country data
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>
<select id="country">
    <option value="">Select Country</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
        }
    }else{
        echo '<option value="">Country not available</option>';
    }
    ?>
</select>
<select id="state">
    <option value="">Select country first</option>
</select>
<select id="city">
    <option value="">Select state first</option>
</select>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#country').on('change',function(){ var countryID = $(this).val(); if(countryID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'country_id='+countryID, success:function(html){ $('#state').html(html); $('#city').html('<option value="">Select state first</option>'); } }); }else{ $('#state').html('<option value="">Select country first</option>'); $('#city').html('<option value="">Select state first</option>'); } }); $('#state').on('change',function(){ var stateID = $(this).val(); if(stateID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'state_id='+stateID, success:function(html){ $('#city').html(html); } }); }else{ $('#city').html('<option value="">Select state first</option>'); } }); }); </script> 

 <select id="state"> <option value="">Select country first</option> </select> <select id="city"> <option value="">Select state first</option> </select> 

ajax.php

 <script type="text/javascript"> $(document).ready(function(){ $('#country').on('change',function(){ var countryID = $(this).val(); if(countryID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'country_id='+countryID, success:function(html){ $('#state').html(html); $('#city').html('<option value="">Select state first</option>'); } }); }else{ $('#state').html('<option value="">Select country first</option>'); $('#city').html('<option value="">Select state first</option>'); } }); $('#state').on('change',function(){ var stateID = $(this).val(); if(stateID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'state_id='+stateID, success:function(html){ $('#city').html(html); } }); }else{ $('#city').html('<option value="">Select state first</option>'); } }); }); </script> 

ajaxData.php

 <?php //Include the database configuration file include 'dbConfig.php'; if(!empty($_POST["country_id"])){ //Fetch all state data $query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC"); //Count total number of rows $rowCount = $query->num_rows; //State option list if($rowCount > 0){ echo '<option value="">Select state</option>'; while($row = $query->fetch_assoc()){ echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>'; } }else{ echo '<option value="">State not available</option>'; } }elseif(!empty($_POST["state_id"])){ //Fetch all city data $query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC"); //Count total number of rows $rowCount = $query->num_rows; //City option list if($rowCount > 0){ echo '<option value="">Select city</option>'; while($row = $query->fetch_assoc()){ echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>'; } }else{ echo '<option value="">City not available</option>'; } } ?> 

請參閱此鏈接中的完整教程

Answer 2

我發現了簡單的方法。 這可能不是最佳解決方案，但應該可以解決問題。

也許這對其他人有幫助： http : //jsfiddle.net/7BUmG/3876/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#leavetype').change(function() { var rightsgranted = $(this).find("option:selected").attr("title"); $('#RightsGranted').val(rightsgranted); }); }); </script> <select id="leavetype" name="leavetype" autocomplete="off"> <option value="">Choose Leave Type</option> <?php $sql = "SELECT LeaveType,RightsGranted from tblleavetype"; $query = $dbh -> prepare($sql); $query->execute(); $results=$query->fetchAll(PDO::FETCH_OBJ); $cnt=1; if($query->rowCount() > 0) { foreach($results as $result) { ?> <option title="<?php echo htmlentities($result->RightsGranted);?>" value="<?php echo htmlentities($result->LeaveType);?>"><?php echo htmlentities($result->LeaveType);?></option> <?php }} ?> </select> <input type='text' name="RightsGranted" id="RightsGranted" hidden/>