JSON沒有填充下拉> IE8

Question

我想填充與JSON的下拉菜單。它適用於除IE以外的其他任何瀏覽器。如果我加

alert(response.html); 

成功響應後，它顯示的數據正確。但IE不會用這些數據填充下拉菜單。任何幫助將非常感謝！

<script type="text/javascript"> 
jQuery(document).ready(function() { 
(function($) { 
    $('select[name="post_type"]').change(function(event) { 
     $.post(<? php echo json_encode(admin_url('admin-ajax.php')); ?> , { 
      action: 'wpse158929_get_terms_for_cpt', 
      post_type: $(this).val(), 
      taxonomy: <? php echo json_encode($taxonomy); ?> , 
      current_selected: $('select[name="location"]').val(), 
       nonce: <? php echo json_encode(wp_create_nonce('wpse158929_get_terms_for_cpt_submit_')); ?> 
     }, function(response) { 
      if (response && !response.error) { 
       $('select[name="location"]').html(response.html); 
      } 
     }, 'json'); 
    }); 
    // Remove if you don't want to call change immediately. 
    $('select[name="post_type"]').change(); 
})(jQuery); 
}); 
</script> 

這是2個下拉菜單功能：

function my_dropdown_categories($taxonomy, $current_selected = '', $include = null) { 
// Get all terms of the chosen taxonomy 
$terms = get_terms($taxonomy, array('orderby' => 'name')); 

// our content variable 
$list_of_terms = '<select id="location-dropdown" class="fade-in five selectboxSingle" name="location">'; 

      // the current selected taxonomy slug (would come from a QUERY VAR) 
      //$current_selected = "asfasdf"; 

if (! is_wp_error($terms)) foreach($terms as $term){ 

    // If include array set, exclude unless in array. 
    if (is_array($include) && ! in_array($term->slug, $include)) continue; 

    $select = ($current_selected == $term->slug) ? "selected" : ""; // Note: == 

    if ($term->parent == 0) { 

     // get children of current parent. 
     $tchildren = get_term_children($term->term_id, $taxonomy); 

     $children = array(); 
     foreach ($tchildren as $child) { 
      $cterm = get_term_by('id', $child, $taxonomy); 
      // If include array set, exclude unless in array. 
      if (is_array($include) && ! in_array($cterm->slug, $include)) continue; 
      $children[$cterm->name] = $cterm; 
     } 
     ksort($children); 

     // OPTGROUP FOR PARENTS 
     if (count($children) > 0) { 
      // $list_of_terms .= '<optgroup label="'. $term->name .'">'; 
      if ($term->count > 0) 
       $list_of_terms .= '<option class="option-parent" value="'.$term->slug.'" '.$select.'>'. $term->name .'</option>'; 
     } else 
      $list_of_terms .= '<option value="'.$term->slug.'" '.$select.'>'. $term->name .' </option>'; 
     //$i++; 

     // now the CHILDREN. 
     foreach($children as $child) { 

      //$select = ($current_selected) ? "selected" : ""; // Note: child, not cterm 
      $list_of_terms .= '<option class="option-child" value="'.$child->slug.'" '.$select.'>'. "&nbsp;&nbsp;" . $child->name.' </option>'; 

     } //end foreach 

     if (count($children) > 0) { 
      $list_of_terms .= "</optgroup>"; 
     } 
    } 
} 

$list_of_terms .= '</select>'; 

return $list_of_terms; 
} 

add_action('wp_ajax_wpse158929_get_terms_for_cpt', 'wpse158929_get_terms_for_cpt'); 
add_action('wp_ajax_nopriv_wpse158929_get_terms_for_cpt',  'wpse158929_get_terms_for_cpt'); 

function wpse158929_get_terms_for_cpt() { 
$ret = array('html' => '', 'error' => false); 

if (! check_ajax_referer('wpse158929_get_terms_for_cpt_submit_', 'nonce', false /*die*/)) { 
    $ret['error'] = __('Permission error', 'wpfm'); 
} else { 
    $post_type = isset($_REQUEST['post_type']) ? $_REQUEST['post_type'] : ''; 
    $taxonomy = isset($_REQUEST['taxonomy']) ? $_REQUEST['taxonomy'] : ''; 
    $current_selected = isset($_REQUEST['current_selected']) ? $_REQUEST['current_selected'] : ''; 

    if (! $post_type || ! $taxonomy) { 
     $ret['error'] = __('Params error', 'wpfm'); 
    } else { 
     global $wpdb; 
     $sql = $wpdb->prepare('SELECT t.slug FROM ' . $wpdb->terms . ' t' 
      . ' JOIN ' . $wpdb->term_taxonomy . ' AS tt ON tt.term_id = t.term_id' 
      . ' JOIN ' . $wpdb->term_relationships . ' AS tr ON tr.term_taxonomy_id = tt.term_taxonomy_id' 
      . ' JOIN ' . $wpdb->posts . ' AS p ON p.ID = tr.object_id' 
      . ' WHERE tt.taxonomy = %s AND p.post_type = %s AND p.post_status = %s' 
      . ' GROUP BY t.slug' 
      , $taxonomy, $post_type, 'publish'); 
     $include = $wpdb->get_col($sql); 
     $ret['html'] = my_dropdown_categories($taxonomy, $current_selected, $include); 
    } 
} 

wp_send_json($ret); 
} 

Answer 1

的Internet Explorer 一向問題，動態HTML和下拉菜單，大多與的.html（）。您應該使用更兼容的方式創建下拉列表：

var json = [{value:"foo",text:"text 1"},{value:"bar",text:"text 2"}]; 
$("#myid option").remove(); 
$.each(json,function(k,v) { 
    $("#myid").append($("<option></option>",{value:v["value"],text:v["text"]})); 
}); 

上述工作適用於IE11。 您也可以嘗試這種香草方式甚至更多的兼容性：

var json = [{value:"foo",text:"text 1"},{value:"bar",text:"text 2"}]; 
var d = document.getElementById("myid"); 
for(var x in json) { 
    d.options[x] = new Option(json[x]["text"],json[x]["value"]); 
} 

更新2

事情是這樣的：

PHP

echo json_encode("html_options"=>array(
    array("text"=>"text 1","value"=>"foo"), 
    array("text"=>"text 2","value"=>"bar"), 
)); 

JS

$("select[name="location"] option").remove(); 
$.each(response.html_options,function(k,v) { 
    $("select[name="location"]").append($("<option></option>",{value:v["value"],text:v["text"],selected:v["selected"],class:v["class"]})); 
}); 

或

var d = document.getElementById("myid");  <--- you need a select id here 
for(var x in response.html_options) { 
    d.options[x] = new Option(response.html_options[x]["text"],response.html_options[x]["value"]); 
    d.options[x].className = response.html_options[x]["class"]; 
    if (response.html_options[x]["selected"]) { 
     d.selectedIndex = x; 
    } 
} 

這是改性my_dropdown_categories返回在數組中的選項（不是HTML）。

function my_dropdown_categories($taxonomy, $current_selected = '', $include = null) { 
    $options = array(); 
    // Get all terms of the chosen taxonomy 
    $terms = get_terms($taxonomy, array('orderby' => 'name')); 
    if (! is_wp_error($terms)) foreach($terms as $term) { 
     // If include array set, exclude unless in array. 
     if (is_array($include) && ! in_array($term->slug, $include)) continue; 
     $select = ($current_selected == $term->slug); // Note: == 
     if ($term->parent == 0) { 
     // get children of current parent. 
     $tchildren = get_term_children($term->term_id, $taxonomy); 
     $children = array(); 
     foreach ($tchildren as $child) { 
      $cterm = get_term_by('id', $child, $taxonomy); 
      // If include array set, exclude unless in array. 
      if (is_array($include) && ! in_array($cterm->slug, $include))  
       continue; 
      $children[$cterm->name] = $cterm; 
     } 
     ksort($children); 

     // OPTGROUP FOR PARENTS 
     if (count($children) > 0) { 
      if ($term->count > 0) { 
       $options[] = array("value"=>$term->slug,"text"=>$term->name,"class"=>"option-parent","selected"=>FALSE); 
      } 
     } else { 
      $options[] = array("value"=>$term->slug,"text"=>$term->name,"class"=>"option-parent","selected"=>$select); 
     } 
     // now the CHILDREN. 
     foreach($children as $child) { 
      $options[] = array("value"=>$child->slug,"text"=>$child->name,"class"=>"option-child","selected"=>$select); 
     } // end foreach 
     } 
    } 
    return $options; 
} 

然後你打電話給你的FUNC來填充 'html_options'（而不是 'HTML'），並返回$漚。

$ret['html_options'] = my_dropdown_categories($taxonomy, $current_selected, $include);