javascript - 表格下拉菜单在 Firefox 中消失

Question

当您在 Firefox 中单击“尺寸”或“性别”旁边的下拉菜单时，该菜单会出现一瞬间然后消失。这发生在该站点的所有单个产品页面上。它似乎在其他浏览器中工作正常。

我一辈子都弄不明白为什么会这样。

有什么想法吗？？

这是链接:

http://chathamivy.com/shop/the-coastal-collection/catch-of-the-day/

这是表单的 PHP:

<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' ) ?>&hellip;</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; ?>

Answer 1

您是否使用任何其他语言来生成这些下拉菜单？

正如您页面上所写的那样，它对我来说效果很好。

Check this fiddle.

<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>