[英]JSON not populating dropdown in >IE8
我正在嘗試使用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.'>'. " " . $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 );
}
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;
}
然后,調用函數以填充“ html_options”(而不是“ html”)並返回$ ret。
$ret['html_options'] = my_dropdown_categories( $taxonomy, $current_selected, $include);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.