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多選過濾器：第一個

回答

相關問題