Javascript 表格下拉菜单在Firefox中消失
当你点击Firefox中“大小”或“性别”旁边的下拉菜单时,该菜单会在一瞬间出现,然后消失。这发生在该站点的所有单个产品页面上。它在其他浏览器中似乎运行良好 我一辈子也弄不明白为什么会发生这种事 有什么想法吗 以下是链接: 这是表单的PHP:Javascript 表格下拉菜单在Firefox中消失,javascript,php,html,css,Javascript,Php,Html,Css,当你点击Firefox中“大小”或“性别”旁边的下拉菜单时,该菜单会在一瞬间出现,然后消失。这发生在该站点的所有单个产品页面上。它在其他浏览器中似乎运行良好 我一辈子也弄不明白为什么会发生这种事 有什么想法吗 以下是链接: 这是表单的PHP: <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID;
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
<?php if ( ! empty( $available_variations ) ) : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php $loop = 0; foreach ( $attributes as $name => $options ) : $loop++; ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title($name); ?>"><?php echo wc_attribute_label( $name ); ?></label></td>
<td class="value"><select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>">
<option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>…</option>
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
} elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
$selected_value = $selected_attributes[ sanitize_title( $name ) ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $name ) ) {
$orderby = wc_attribute_orderby( $name );
switch ( $orderby ) {
case 'name' :
$args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
break;
case 'id' :
$args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
break;
case 'menu_order' :
$args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
break;
}
$terms = get_terms( $name, $args );
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) )
continue;
echo '<option value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
}
} else {
foreach ( $options as $option ) {
echo '<option value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
}
}
}
?>
</select> <?php
if ( sizeof( $attributes ) == $loop )
echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap" style="display:none;">
<?php do_action( 'woocommerce_before_single_variation' ); ?>
<div class="single_variation"></div>
<div class="variations_button">
<?php woocommerce_quantity_input(); ?>
<button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
<input type="hidden" name="variation_id" value="" />
<?php do_action( 'woocommerce_after_single_variation' ); ?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php else : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php endif; ?>
您是否使用其他语言生成这些下拉菜单
正如它写在你的页面上,对我来说很好
选择一个选项…
超小
小的
中等
大的
特大型
选择一个选项…
女性
青年
select在有焦点时看起来像是在重建。可能有一些javascript把事情搞砸了,我不打算帮你翻遍整个网站,但一个起点是在javascript中查找与所选元素相关的事件。谢谢MLeFevre。我不知道足够多的javascript来理解我在哪里可以找到它和/或如何修复它。你有什么建议可以解决这个问题吗?谢谢Callie。该网站建立在Woocommerce框架之上。我只是在我的问题中粘贴了上面的PHP代码。
<select id="size" name="attribute_size">
<option value="">Choose an option…</option>
<option class="active" value="extra-small">Extra Small</option>
<option class="active" value="small">Small</option>
<option class="active" value="medium">Medium</option>
<option class="active" value="large">Large</option>
<option class="active" value="extra-large">Extra Large</option>
</select>
<select id="gender" name="attribute_gender">
<option value="">Choose an option…</option>
<option class="active" value="womens">Womens</option>
<option class="active" value="youth">Youth</option>
</select>