在Wordpress選項頁面動態生成下拉列表

Question

我有一個我正在使用的插件，其中的一部分包含選項頁面上的「條件」下拉列表。基本上，我有三個選項的下拉菜單，第二個下拉菜單根據第一個下拉菜單中選擇的內容填充來自數據庫的信息。問題是，我不知道如何填充第二個下拉菜單！ AJAX並不是那麼棒，但它似乎是可能的解決方案。這裏有更多經驗豐富的開發者的想法嗎？

編輯：這就是我目前是，但它似乎從來就沒運行：

<form action="<?php echo site_url() ?>/wp-admin/admin.php?page=ad_manager&pagetype=addedit&pid=<?php echo $_REQUEST['id']; ?>" method="post" name="ad_success"> 
    <table cellpadding="5" class="widefat post fixed"> 
     <thead> 
      <tr> 
       <th><strong><?php if($_REQUEST['id'] != '') { _e('Edit Ad'); } else { _e('Create Ad'); } ?></strong></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <label for="gtad_condition"> 
         <strong><?php _e('Ad Condition'); ?>:</strong> 
         <select name="ad_condition" id="ad_condition"> 
          <option value="">Select an option...</option> 
          <option value="is_city">Is City</option> 
          <option value="is_location">Is Location</option> 
          <option value="is_page">Is Page</option> 
         </select> 
        </label> 
        <label for="gtad_location"> 
         <select name="ad_location" id="ad_location"></select> 
        </label> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</form> 

<script> 
    jQuery(document).ready(function() { 
     $ad_condition = $("select[name='ad_condition']"); 
     $ad_location = $("select[name='ad_location']"); 

     $ad_condition.change(function() { 
      if ($(this).val() == "Is City") { 
       $("select[name='ad_location'] option").remove(); 
       $("<option>Test</option>").appendTo($ad_location); 
      } 
     }); 
    }); 
</script> 

Answer 1

爲什麼你上面的代碼不工作的原因，是因爲$("mySelect").val()返回value屬性<option>的，而不是開始和結束標記之間的文本。看我的小提琴：http://jsfiddle.net/XhujD/。

因此，可以通過切換

if ($(this).val() == "Is City") { 

解決問題進入

if ($(this).val() == "is_city") { 

---

使用AJAX來填充時，第一個改變將基本上如下所示的第二個下拉：

// wait until the first list has changed 
$("#list1").change(function(){ 

    // call a script using AJAX and pass the selected value 
    $.post('myScript.php', {myValue: $(this).val()}, function(data){ 
     // clear the second list 
     $("#list2").find("option").remove(); 

     // add the options based on the 'data' variable 
     $("#list2").append('<option value="myOption">' + data + '</option>') 
    }); 

});