有條件和正常選擇

我有一個運行良好的條件選擇與兩個選擇框。但是，我希望能夠使用第一個選擇作爲正常選擇，並顯示具有某個類名稱的項目，然後，如果用戶想縮小它的範圍，他可以使用子選擇以顯示只有一個項目。有條件和正常選擇

如果您選擇「Apple」，則需要在子選擇中選擇一個Apple模型。如果您在第一個選擇框中選擇「Apple」，我希望能夠顯示所有Apple模型（例如class =「apple」）。

我試圖寫一些代碼 - 開始，但它不工作：

var selectedprod = $("#selectprod").val(); 
$(".ct-content-container-box").hide(); 
$('.' + selectedprod).parent('.ct-content-container-box').fadeToggle("slow", "linear"); 
$('#selector').blur();

誰能給我個忙嗎？

來源

2012-11-08 Meek

檢查了這一點。不帶開關語句的不同方法。 my Fiddle

$selectprod = $('#selectprod'); 
$selector = $('#selector'); 

$selectprod.change(function() { 
    $options = $('.ct-content-container-box.skin-white'); 
    $selector.empty(); 
    $selector.append("<option value='showall'>Sub select</option>"); 

    $options.show(); 
    $currentSelection = $(this).val(); 
    if ($currentSelection != "showallprod") { 
     $options.children().each(function() { 
      if (!($(this).hasClass($currentSelection))) { 
       $(this).parent($options).hide(); 
      } else { 
       $selector.append("<option value='" + $(this).attr('id') + "'>" + $(this).text() + "</option>"); 
      } 
     }); 
    } 
});

而且，沒有理由手動添加子選擇選項，如值在HTML已經存在。

來源

2012-11-08 16:21:48 pmandell

這是一個完美的解決方案。代碼更小，維護更簡單。非常感謝。 – Meek

我認爲這裏唯一的問題是區分大小寫。你的價值觀以大寫字母開頭，但相應的課程則沒有。只需添加.toLowerCase()，它似乎是工作：

$('#selectprod').change(function() { 

    var selectedprod = $(this).val().toLowerCase(); 
    $(".ct-content-container-box").hide(); 
    $('.' + selectedprod).parent('.ct-content-container-box').fadeToggle("slow", "linear"); 
    $('#selector').blur(); 

});

查看更新後的FIDDLE。

來源

2012-11-08 15:31:13

有條件和正常選擇

回答

相關問題