jQuery多选过滤器：第一个

我以前发布了一个脚本来动态地过滤我的选择菜单（http://stackoverflow.com/questions/9516736/why-does-my-jquery-filter-only-work-once-on这个选择元素）jQuery多选过滤器：第一个

现在我有一点问题。

我试着去让用户：

选择颜色
的屏幕上显示尺寸的选择，与该颜色在另一选择菜单
也显示第一个选项值（每次更改颜色时都会从页面的其他位置选择尺寸选择菜单。

这是脚本我有：

var $options= $('#product-multiple-2 option'); 
    $("#product-multiple-1").change(function(){ 
     // Change Image 
     var pImage3 = ""; 
     $("#product-multiple-1 option:selected").each(function() { 
      pImage3 = $(this).attr("data-product-image"); + " "; 
      $(".product-code").html(''); 
      $("#product-multiple-container").fadeOut(); 
     }); 
     $("#slideshow-image").attr("src", pImage3); 
     // Display Options 
     $("#product-multiple-container").fadeIn(); 
     var matches = $options.filter('.'+$(this).val()).clone(); 
     $("#product-multiple-2").html(matches); 
    });

这是HTML

  <p class="product-code"></p> 
      <li> 
      Colour Options 
      <select name="item_options[cf_product_option_colour]" id="product-multiple-1"> 
       <option>Choose Option</option> 
       <option value="Red">Red</option> 
       <option value="Green">Green</option> 
       <option value="Blue">Blue</option> 
      </select> 
      </li> 
      <li> 
      Size Options 
      <select name="item_options[cf_product_option_size]" id="product-multiple-2"> 
       <option>Choose Option</option> 
       <option value="75643" class="Red">5ml - £1.00</option> 
       <option value="765432" class="Red">10ml - £2.00</option> 
       <option value="867564534" class="Red">15ml - £3.00</option> 
       <option value="5434" class="Red">20ml - £4.00</option> 
       <option value="6453234" class="Green">5ml - £1.00</option> 
       <option value="45256536" class="Green">10ml - £2.00</option> 
       <option value="52454" class="Green">15ml - £3.00</option> 
       <option value="6543754" class="Blue">5ml - £1.00</option> 
       <option value="4316243" class="Blue">10ml - £2.00</option> 
      </select> 
      </li>

注意从我的HTML，我有一个名为类“产品代码”这是哪里我想从大小选项中放置值。

问题即时通讯，如果我使用：第一个选择器。它引发了我之前在选项列表中的第一个选项。不是在更新时。

任何帮助将有所帮助！并帮助我避免严重脱发。

来源

2012-03-21 Jason Mayo

请您把它贴在http://jsfiddle.net所以我们可以有一出戏。干杯。 – Deadlykipper 2012-03-21 11:58:00

不会把这个放在更改处理程序的最后？

$(".product-code").html($("#product-multiple-2 option:selected").val());

来源

2012-03-21 12:11:13

现货，这工作。为什么我没有想到这个？很简单。我确实需要确保在过滤了选项之后放置它，如下所示： – 2012-03-22 22:01:53

  var $options= $('#product-multiple-2 option'); 
      $("#product-multiple-1").change(function(){ 
       // Change Image 
       var pImage3 = ""; 
       $("#product-multiple-1 option:selected").each(function() { 
        pImage3 = $(this).attr("data-product-image"); + " "; 
        $(".product-code").html(''); 
        $(".product-multiple-container").fadeOut(); 
       }); 
       $("#slideshow-image").attr("src", pImage3); 
       // Display Options 
       $(".product-multiple-container").fadeIn(); 
       var matches = $options.filter('.'+$(this).val()).clone(); 
       $("#product-multiple-2").html(matches); 
       $(".product-code").html($("#product-multiple-2 option:selected").val()); 
       $(".product-price").html($("#product-multiple-2 option:selected").attr("data-product-price")); 
      });

来源

2012-03-22 22:04:06

jQuery多选过滤器：第一个

回答

相关问题