禁用基於類的選擇元素選項

Question

嘿傢伙剛剛被告知，隱藏不能用於跨瀏覽器選擇元素選項。

所以我想知道如何使用禁用爲我有以下問題。

這個例子被簡化了，實際的代碼包含PHP循環和MySQL來顯示選項和內容。

好了，所以首先我有兩個選擇元素：

<select class="form-control select-box"> 
    <option value="make-any">Make (Any)</option> 
    <option value="BMW">BMW</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Volvo">Volvo</option> 
</select> 

<select class="form-control select-box-model"> 
    <option value="make-any">Make (Any)</option> 
    <option value="C220">C220</option> 
    <option value="X1">X1</option> 
    <option value="X5">X5</option> 
    <option value="XC90">XC90</option> 
</select> 

我再有這些列表：

<div class="makes BMW X1"> 
<ul> 
    <li>BMW</li> 
    <li>X1</li> 
</ul> 
</div> 

<div class="makes VOLVO XC90"> 
<ul> 
    <li>VOLVO</li> 
    <li>XC90</li> 
</ul> 
</div> 

<div class="makes MERCEDES C220"> 
<ul> 
    <li>MERCEDES</li> 
    <li>C220</li> 
</ul> 
</div> 

<div class="makes BMW X5"> 
<ul> 
    <li>BMW</li> 
    <li>X1</li> 
</ul> 
</div> 

我目前使用這個jQuery的隱藏與類的DIV 「使」，如果所選擇的選項不div的類匹配，從而例如「BMW」：

<script> 
    $(document).ready(function(){ 
    $('.form-control').change(function(){ 
    var make = $(this).val(); 
    if(make != 'make-any'){ 
     $('.makes').hide(); 
     $('.'+make).show(); 
     } else { 
     $('.makes').show(); 
     } 
    }); 
    });</script> 

所以一你可以看到我有點問題，因爲第二個select類型的元素包含了「select-box-model」類型的所有模型，我想禁用與第一個選擇無關的選項元素選項已被選中。

例如列表容器包含「製作」和每輛車的「模式」的類：

<div class="makes BMW X5"> 

那麼，如何可以禁用未與關聯的選項「製作」，例如，如果用戶選擇BMW作爲第一個元素，我只會喜歡與'Make'關聯的'Models'。

任何例子都會很棒，謝謝。

Answer 1

嗯，我不完全確定我已經理解了你的問題。

但我假設您的意思是，如果您從選擇一個(form control)中選擇一個汽車品牌，則應在選定的兩個select-box-model中啓用可用的型號。一旦選擇模型，準確的div需要顯示？

如果這就是你想要做的事情，那麼你的標記並不是實現這個目標的最佳結構。

的jQuery：

$('.select-box-model').prop('disabled',true); 
$('.form-control').on('change',function(){ 
    $('.select-box-model').prop('disabled',false); 
    if($(this).val() != 'make-any'){ 
    $('.makes').hide();   

    //check if the models drop down is used 
    if($(this).hasClass('select-box-model')){ 
     //get selected value 
     var value = $(this).val(); 
     $('.'+ value).show(); 
     return false; 
     } 

    //get selected value 
    var carBrand = $(this).val(); 
    $('.select-box-model option').prop('disabled',true); 
    $('.'+ carBrand).find('li').each(function(){ 

    if($.trim(carBrand) != $.trim($(this).text())){ 
     $('.select-box-model option[value="'+ $(this).text() +'"]').attr("disabled", false); 
     } 
    }); 
    } 
}); 

下面是一個小提琴：http://jsfiddle.net/z59v56ec/

了一個更簡潔的解決方案來實現這一目標是用ajax

從來沒有少，我用你的標記做出了表率來填充汽車品牌的模型。

但是，如果你真的想按照自己的方式來做，那麼下面的邏輯更容易。

• 選擇一個擁有汽車品牌的價值
• 選擇兩個擁有汽車品牌的價值和文本是模型
• 選擇一個將使選擇兩個選項與該汽車品牌價值
• 在選擇兩個選擇一個模型時，精確的div將根據選項文本顯示。

在旁註中，請注意您的參考。 VOLVO與沃爾沃不一樣。

以防萬一我完全錯過了這一點 - 對不起！ :)

Answer 2

首先，根據您的第一個選擇的選定值創建多個選擇並切換它們的顯示會好得多。然後，您創建多個div並根據您的第二個選擇的選定值切換其顯示。也就是說，如果你真的想這個「動態」的攻擊，你最好有兩個選擇 - 和一個無序列表 - 和清除它們的內容和重寫的HTML，當您去：

<select class="form-control select-box" id="selectMake"> 
    <option value="make-any">Make (Any)</option> 
    <option value="BMW">BMW</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Volvo">Volvo</option> 
</select> 

<select class="form-control select-box-model" id="selectModel"> 
</select> 

<ul id="ulCars"> 
</ul> 

$("#selectMake").change(function(){ 
    $("#selectModel").empty(); 
    $("#ulCars").empty(); 

    switch ($(this).val()){ 
     case "BMW": 
      $("#selectModel").append("<option>X1</option>").val("X1"); 
      $("#ulCars").append("<li>X1</li>"); 
     break; 
    } 
}); 

等等等等但是，您可以輕鬆清除列表和下拉列表，然後重新填充它們。但就像我說的，我會用多個div來切換它們的顯示。