如何使用combox更改页面上的产品显示

时间:2015-01-14 06:36:54

标签: javascript jquery ajax wordpress woocommerce

我正在使用woocommerece和word press。我通过此查询从数据库中获取图像。

$args = array( 'post_type' => 'product',  'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$date','order' => 'DESC' );

然后我使用此代码在页面上显示图像。

<div class="prodimg">
    <ul class="rcollpro">

    $args = array( 'post_type' => 'product',  'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$date','order' => 'DESC' );

    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
        <li class="rcollproli"> 
          <a href="<?php the_permalink(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?></a>

             <h3><?php the_title(); ?></h3>
 <span class="price"><?php echo $product->get_price_html(); ?></span>
            <br />
            <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?></li>
        <!-- /span3 -->
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
    <!-- /row-fluid -->
</div>

我正在使用以下代码用于组合框和java脚本

<select name="orderby" class="orderby" id="selector">
    <option value="menu_order">Default sorting</option>
    <option value="popularity">Sort by popularity</option>
    <option value="date">Sort by newness</option>
    <option value="price">Sort by price: low to high</option>
    <option value="price-desc">Sort by price: high to low</option>
</select>

$( document ).ready(function() {
  $("#selector").change(function() {   
    var selectedValue = $("#selector option:selected").val();
    alert('Selected text ' + selectedValue);
  });
});

当用户在组合框中更改值时,我希望页面上的显示值(来自db的图像)相应地更改。我使用ajax还是会用javascript找到解决方案?

0 个答案:

没有答案