如何填寫基於一個組合框阿賈克斯

Question

我要填寫基於另一種選擇組合框的選項 組合框選項的其他選擇的組合框的值記住，我在同一個頁面

<select name="idcataloguectg" class="form-control" id="idcataloguectg"> 
    <!-- PHP CODE ##################################### --> 
    <?php 
    try 
    { 
    $pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8', 'root', '');// connection to the server and DB 
     } 
     catch (Exception $e) 
     { 
       die('Erreur : ' . $e->getMessage());// if error 
     } 
     $respond = $pdo->query('SELECT * FROM catalogue');// my request 

     while ($data = $respond->fetch())// fetch into the table 
     { 
     ?> 
     <!-- PHP CODE ##################################### --> 
<option value="<?php echo $data['0']; ?>"><?php echo $data['1']; ?></option> 
     <!-- PHP CODE ##################################### --> 
     <?php 
     } 
     $respond->closeCursor(); // end of request 
     ?> 
     <!-- PHP CODE ##################################### --> 
    </select> 
    <label>Categorie</label><br> 
    <select name="idcategorief" class="form-control" id="idcategorief"> 
     <!-- PHP CODE ##################################### --> 
     <?php 
     $idcataloguectg = $_GET['idcataloguectg']; 
     try 
     { 
     $pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8', 'root', '');// connection to the server and DB 
     } 
     catch (Exception $e) 
     { 
       die('Erreur : ' . $e->getMessage());// if error 
     } 
     $respond = $pdo->query('SELECT * FROM categorie WHERE id_categorie='.$idcataloguectg.'');// my request 

     while ($data = $respond->fetch())// fetch into the table 
     { 
     ?> 
     <!-- PHP CODE ##################################### --> 
<option value="<?php echo $data['0']; ?>"><?php echo $data['2']; ?></option> 
     <!-- PHP CODE ##################################### --> 
     <?php 
     } 
     $respond->closeCursor(); // end of request 
     ?> 
     <!-- PHP CODE ##################################### --> 
</select> 

PHP代碼

我試圖搜索的例子，但所有我發現他們使用外部的PHP文件，填充選項，但在我的例子中，我把他們全部在同一頁 所以我能做什麼 你可以給我的AJAX腳本

Answer 1

對於第二個select字段改變按照y，當用戶更改類別選擇字段的值時，您需要重新加載頁面。要做到這一點，改變選擇標籤

<select name="idcataloguectg" class="form-control" id="idcataloguectg" onChange="window.location.href = '/?idcataloguectg=' + this.value"> 

這將網址更改爲相同的網站（您可能需要與你的PHP文件的名稱來代替/），但與idcataloguectgGET參數正確設置。

如果你這樣做，你可能也想爲類別選項行更改爲

<option value="<?php echo $data['0']; ?>" <?php if ($_GET['idcataloguectg'] == $data['0']) { ?> selected <?php } ?>><?php echo $data['1']; ?></option> 

這樣當通過GET參數選擇一個類別，右邊的選項被選中，而不是默認（第一）一個。

---

但它不是重新加載整個頁面是一個好主意，而應該用Ajax做，但requieres你把邏輯在另一個文件中的第二select標記，例如category.php。該文件應包含以下（該代碼的部分將obiously從主文件中刪除）：

<!-- PHP CODE ##################################### --> 
<?php 
$idcataloguectg = $_GET['idcataloguectg']; 
try 
{ 
$pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8',  'root', '');// connection to the server and DB 
} 
catch (Exception $e) 
{ 
    die('Erreur : ' . $e->getMessage());// if error 
} 
$respond = $pdo->query('SELECT * FROM categorie WHERE id_categorie='.$idcataloguectg.'');// my request 

while ($data = $respond->fetch())// fetch into the table 
{ 
?> 
<!-- PHP CODE ##################################### --> 
               <option value="<?php echo  $data['0']; ?>"><?php echo $data['2']; ?></option> 
<!-- PHP CODE ##################################### --> 
<?php 
} 
$respond->closeCursor(); // end of request 
?> 
<!-- PHP CODE ##################################### --> 

第一select標籤然後換

<select name="idcataloguectg" class="form-control" id="idcataloguectg" onChange="$.get('category.php?idcataloguectg=' + this.value, function(data){$('#idcategorief').html(data);});"> 

該腳本使用jQuery和發送請求到新的php文件category.php，分類標識爲GET參數。當請求成功返回選項時，它們位於第二個select標記內，取代之前的內容。

這樣做的好處是每次只發送所需的數據，大大減少了所需的流量和計算。

編輯：

我把JS在select標籤的onChange屬性。每次選定的值更改時都會執行該代碼。您也可以將代碼放入函數中的腳本標記或文件中，然後在屬性中執行該函數。 我使用jQuery的$.get函數進行ajax調用，該函數是$.ajax函數的簡寫，語法簡單。請閱讀它們here和here。

我使用的腳本如下：

$.get(
    'category.php?idcataloguectg=' + this.value, 
    function(data){ 
     $('#idcategorief').html(data); 
    } 
); 

它啓動的GET Ajax請求文件「category.php」用get參數idcataloguectg集並定義成功的回調函數，該函數的響應數據並用它替換第二個選擇標籤的innerhtml。 但最好是這樣寫：

$.get(
    'category.php', 
    { 
     idcataloguectg: $('#idcataloguectg').val() 
    }, 
    function(data){ 
     $('#idcategorief').html(data); 
    } 
); 

這並不相同，但定義的參數中的對象，這是更具可讀性和還與POST請求。另外，我用基於id的jQuery選擇器替換了this，因爲this有時可能很麻煩，所以這樣更安全。

如果你想有三個選擇標籤，第一個可以保持不變，第二個腳本（這是由第二select標籤的onChange屬性稱呼）將需要看起來像這樣：

$.get(
    'second.php', 
    { 
     valueSelectOne: $('#idOfFirstSelectTag').val(), 
     valueSelectTwo: $('#idOfSecondSelectTag').val() 
    }, 
    function(data){ 
     $('#idThirdSelectTag').html(data); 
    } 
); 

用您的php文件的名稱替換second.php，該文件返回第三個輸入字段的值以及相應的ID。如果你不明白與$相關的東西，你應該閱讀jQuery。

希望這會有所幫助。