使用PHP和JavaScript與jQuery

考慮下面的結構選擇另一種選擇選項後更新HTML選擇選項：使用PHP和JavaScript與jQuery

命名爲「區」與列「ID」的表格，「名稱」。

名爲「城市」的表格，其中包含「id」，「region_id」，「name」列。

什麼是使用PHP和Javascript重新填充html選項的最佳方式？

例如可以說我有下面的PHP代碼：

<select name = "region"> 
<option value = "">Select Region</option> 
<? 
foreach ($regions as $region) 
{ 
    echo "<option value = '$region[id]'>region[name]</option>"; 
} 
?> 
</select> 

<select name = "city"> 
<option value = "">Select City</option> 
</select>

一旦區域已被選中，都用正確的外鍵「的region_id」對應於選定區域中的城市，將被填充進入城市選擇。

假設我使用這種結構很多，所以我確實希望有一個最小的，易於重用的代碼。

來源

2014-02-16 Jacob Cohen

檢查接受的答案在這個問題http://stackoverflow.com/questions/5861090/populating-one-select -box-based-on-the-selection-in-another-select-box-jquery –

這就是我已經在做的事情。這需要我爲不同類型的表創建一個新文件，或者基本上爲結構中的最輕微的變化，我需要更改表。我正在尋找更優雅的經典動態方式。無論如何感謝這個答案。 –

不要真正理解，在第一個使用簡單的json結構中填充第二個選項列表的dependend值，例如：'{data：{'itemId'：'itemValue'}}'然後遍歷返回的對象，在任何情況下都以相同的方式返回數據，所以你的表結構並不重要 –

HTML

<select class="selectbox" name = "region" data-table="regions" data-parent="parent_id" data-name="name" data-target="targetselect"> 
    <option value = "">Select Region</option> 
    <? foreach ($regions as $region): ?> 
    <option value = '<?php echo $region[id];?>'><?php echo region[name]; ?></option> 
    <?php endforeach;?> 
</select> 

<select name = "city" class="targetselect"> 
    <option value = "">Select City</option> 
</select>

* JS *

jQuery(document).ready(function($){ 
    $('.selectbox').on('change', function(e) { 
     var target = $(this).data('target'); 
     var data = $(this).data(); 
     data.key = $(this).val();    

     $.ajax({ 
      url: 'ajax.php', 
      data: data, 
      type: 'POST' 
     }).success(function(response){ 
      //check if response 
      if(response.items) { 
       $.each(response.items, function(){ 
        target.append($('<option></option>') 
         .attr('value', this.id) 
         .text(this.name)); 
       }); 
      } 
     }); 
    }) 
});

* PHP *

/*** 
* Check if You have all required data 
**/ 

if(isset($_POST['table']) && ....) { 
    /** 
     * Do all security checks for example if table is allowed to query etc 
     **/ 
    $query = 'SELECT required_cols ....'; 
    $result = /** Query results **/; 
    echo json_encode($result, true); 
}

這是很多沒有檢查的代碼，我寫它沒有測試，但應該讓你知道從哪裏開始

來源

2014-02-16 13:21:14

我運行了一些測試，看起來好像我們在正確的方式！我可以通過瀏覽它來告訴你，當你連續選擇不同的選項時，append可能會把事情搞砸，但是html（）應該可以做到這一點。這應該是一個內置的php事件IMO！ –

這只是一個想法，如果你想在你的ajax響應中返回html選項，那就好了:) –

使用PHP和JavaScript與jQuery

回答

相關問題