# Changing selected option on button click  select (ok) homef.vn hoặc inop.vyanh.net

<http://jsfiddle.net/8RUBj/15/>

```
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>


<div data-role="page" id="page12">
    <div data-theme="e" data-role="header">
        <a href="#page1" data-icon="back" data-transition="flow" data-direction="reverse" data-ajax="false">Back</a>
        <h3>
            jQuery Mobile App
        </h3>
    </div>
    <div data-role="content">    
      <label for="City">Select City</label>
      <select name="City" id="City">
          <option value="">Select city...</option>
          <option value="A">Auckland</option>
          <option value="W">Wellington</option>
          <option value="C">Christchurch</option>
          <option value="Q">Queenstown</option>
          <option value="D">Dunedin</option>
      </select>
      <br>
      <div data-role="controlgroup">
          <a data-role="button" data-val="A" class="select-change" id="btnAuckland">Auckland</a>
          <a data-role="button" data-val="W" class="select-change"id="btnWellington">Wellington</a>
          <a data-role="button" data-val="C" class="select-change"id="btnChristchurch">Christchurch</a>
          <a data-role="button" data-val="Q" class="select-change"id="btnQueenstown">Queenstown</a>
          <a data-role="button" data-val="D" class="select-change"id="btnDunedin">Dunedin</a>
      </div>
    </div><!-- Close Content Div of Page12 -->
</div><!-- Close Page12 -->
```

```
$('.select-change').click(function(){ 
    $('#City').val($(this).data('val')).trigger('change');
})
```

![](/files/-M2aliFJVvEUMy9vWx8c)

![](/files/-M5TTfAGoQcFdZmvI4qm)

```
<?php
/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.5.5
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form  class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
		<p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
	<?php else : ?>
		<table class="variations" cellspacing="0">
			<tbody>
				<?php foreach ( $attributes as $attribute_name => $options ) : ?>
					<tr <?php if($attribute_name === 'pa_kich-thuoc'){echo 'class="trpasize"';}elseif ($attribute_name === 'pa_mau') {echo 'class="trpacolor"';} ?>>
						<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
						<td class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( stripslashes( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) ) : $product->get_variation_default_attribute( $attribute_name );
								wc_dropdown_variation_attribute_options( array(
									'options'   => $options,
									'attribute' => $attribute_name,
									'product'   => $product,
									'selected'   => $selected
								) );
								echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
							?>
							<?php if($attribute_name === 'pa_mau'){ ?>
							<div data-role="controlgroup" id="controlgroup">
								<?php  
									$variations = $product->get_available_variations();
									foreach ($variations as $variation) {
								?>
						      <a data-role="button" data-val="<?php echo $variation['attributes']['attribute_pa_mau']; ?>" class="select-change"><img src="<?php echo $variation['image']['src']; ?>" alt="Anh san pham"></a>
								<?php
									}
								?>
							</div>
							<?php } ?>
						</td>
					</tr>
				<?php endforeach; ?>
				<tr class="trpaquantity">
					<td>
						<?php
							do_action( 'woocommerce_before_add_to_cart_quantity' );

							woocommerce_quantity_input( array(
								'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
								'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
								'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
							) );

							do_action( 'woocommerce_after_add_to_cart_quantity' );
							?>
					</td>
				</tr>
				<tr>
					<td>
						<?php  
							/**
							 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
							 *
							 * @since 2.4.0
							 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
							 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
							 */
							do_action( 'woocommerce_single_variation' );
						?>
					</td>
				</tr>
			</tbody>
		</table>
	<?php endif; ?>
	<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );

```

Một sản phẩm khác

homef.vn/ecovacs-deebot-dn55-ozmo-900-robot-hut-bui-lau-nha-2/

```
<?php
/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.5.5
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
		<p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
	<?php else : ?>
		<table class="variations" cellspacing="0">
			<tbody>
				<?php foreach ( $attributes as $attribute_name => $options ) : ?>
					<tr>
						<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
						<td class="value">
							<?php
								wc_dropdown_variation_attribute_options(
									array(
										'options'   => $options,
										'attribute' => $attribute_name,
										'product'   => $product,
									)
								);
								echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
							?>
							<?php if($attribute_name === 'pa_goi-bao-hanh'){ ?>
							<div data-role="controlgroup" id="controlgroup">
								<?php  
									$variations = $product->get_available_variations();
									foreach ($variations as $key => $variation) {
								?>
									<a data-role="button" data-val="<?php echo $variation['attributes']['attribute_pa_goi-bao-hanh']; ?>" class="select-change <?php if($key == 0){echo 'active';} ?>">
										<span><?php echo $variations[$key]['image']['title']; ?></span>
										<samp><?php echo number_format($variations[$key]['display_price'],0, ',', '.'); ?>&nbsp;₫</samp>
									</a>
								<?php
									}
								?>
							</div>
							<?php } ?>
						</td>
					</tr>
				<?php endforeach; ?>
			</tbody>
		</table>

		<div class="single_variation_wrap">
			<?php
				/**
				 * Hook: woocommerce_before_single_variation.
				 */
				do_action( 'woocommerce_before_single_variation' );

				/**
				 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
				 *
				 * @since 2.4.0
				 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
				 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
				 */
				do_action( 'woocommerce_single_variation' );

				/**
				 * Hook: woocommerce_after_single_variation.
				 */
				do_action( 'woocommerce_after_single_variation' );
			?>
		</div>
	<?php endif; ?>

	<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<script>
	jQuery(document).ready(function($) {
		jQuery('.select-change').click(function(){ 
    	jQuery('#pa_goi-bao-hanh').val($(this).data('val')).trigger('change');
    	jQuery('.select-change').removeClass('active');
    	jQuery(this).addClass('active');
  	});
	});
</script>
<style>
	.woocommerce-variation-description >p {
		margin-bottom: .5em;
    background-color: #ffe9e9;
    border-radius: 5px;
    padding: 5px 10px;
    line-height: 1.5;
    color: #000;
    font-weight: 600;
    float: left;
    width: 100%;
	}
	#pa_goi-bao-hanh {
		display: none;
	}
	#controlgroup {
		display: flex;
		justify-content: space-between;
	}
	#controlgroup >a {
		text-align: center;
		flex-grow: 1;
		margin-right: 10px;
		display: block;
		box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,.15);
		border: 1px solid rgba(0,0,0,.15);
		background: #ffffff;
    padding: 5px;
	}
	#controlgroup >a.active {
		border: 1px solid #d70018;
	}
	#controlgroup >a:last-child {
		margin-right: 0;
	}
	#controlgroup >a >span{
		display: block;
		font-weight: 700;
	}
	#controlgroup >a >samp {
		display: block;
		font-weight: 700;
		color: #d70018;
	}
</style>
<?php
do_action( 'woocommerce_after_add_to_cart_form' );

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/changing-selected-option-on-button-click-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.