Select dropdown option not selecting on mobile phone (iphone 4s) - html

Question

When you select another option than default on a mobile phone, the native mobile phone selection list appears. When you then select another option, the price changes however the selected weight does not appear in the selection box.
Open for example this page on the mobile phone.
<select class="variation-selector" id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>">
<option value="" disabled="disabled"><?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>
Edit:
The above code outputs:
<select class="variation-selector selecter-element" id="pa_gewicht" name="attribute_pa_gewicht">
<option value="" disabled="disabled">Kies een optie…</option>
<option value="175-g" selected="selected">175 g</option>
<option value="350-g">350 g</option>
</select>
<div class="selecter closed">
<span class="selecter-selected">175 g</span>
<div class="selecter-options" style="display: none;">
<span class="selecter-item disabled first" data-value="">Kies een optie…</span>
<span class="selecter-item selected" data-value="175-g">175 g</span>
<span class="selecter-item last" data-value="350-g">350 g</span>
</div>
</div>
As you can see it duplicates it. Found out this is cause by a line in my javascript, namely:
$j(".orderby, .variations td.value select").selecter();
Which in turn uses the jquery.fs.selecter.min.js