如何使用图像更改下拉选择

我要完成的是让图像缩略图替换woocommerce变体产品页面中的下拉框。 我尝试使其工作的方式是，当用户单击变体产品图像时，（将被隐藏）下拉框将更改为正确的值，就像用户与下拉框本身交互一样。我正在使用的文件是可变的.php。

下面是一段代码。我所有的自定义代码都以关闭选择标签之前的选项标签循环开始。

$loop = 0; foreach ( $attributes as $name => $options ) : $loop++; $countimg = 0;?>
    <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 );
                    $count = 1;
                    foreach ( $terms as $term ) {
                        if ( ! in_array( $term->slug, $options ) )
                            continue;                               
                        echo '<option id="' . $count . '" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';                          
                        $count++;}
                    } else {                            
                        foreach ( $options as $option ) {
                            echo '<option id="' . $count . '" 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>';                            
                            $count++;}
                        }
                    }
                    ?>
        </select> 
                <div>
                    <?php foreach ( $available_variations as $available_variation ) {
                        $countimg++;
                        $image_links = $available_variation['image_link'];
                    echo '<img id="' . $countimg . '" src="' . $image_links . '" onclick="selectVariationOption(this.id)" style="height:65px; margin-bottom:5px;">';
                    }?>
                </div>
                <script>
                function selectVariationOption(clicked_id) {                
                document.getElementById("<?php echo esc_attr( sanitize_title( $name ) ); ?>").selectedIndex = clicked_id;
                }
                </script>
                <?php
                if ( sizeof($attributes) == $loop )
                    echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
                ?>
            <?php endforeach;?>
        </div>
    </div>

我在这里所做的是我在选项标签中添加了一个数字 ID，并随着每个附加选项的可用而增加。 然后，我显示了可用的图像变体，并添加了一个数字 ID，该数字 ID 循环以匹配相应的选项 ID。最后，我使用了一个简单的javascript，当单击图像时，下拉框将更改为正确的selectedIndex。 问题是，页面不会对更改做出反应，就好像下拉框直接与之交互一样。 简而言之，除了下拉框改变视觉值之外，什么也没发生。 我想要它，以便单击图像与单击下拉框中的选项完全相同。

如果您需要更多说明或信息，请告诉我。提前感谢！