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()이 <option>의 value 속성이 아닌를 반환하기 때문에 코드가 위의 작동하지 않는 이유는,이다 텍스트는 시작 태그와 종료 태그 사이에 있습니다. 내 바이올린보기 : http://jsfiddle.net/XhujD/.

그래서, 당신은 첫 번째는 다음과 같이 기본적으로 모양이 변경되었습니다 두 번째 드롭 다운을 채울 AJAX를 사용하여

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

---

에

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

을 변경하여 문제를 해결 :

를

// 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>') 
    }); 

});