當選擇其他選擇下拉選項時，jQuery顯示/隱藏選項下拉菜單

Question

根據另一個選擇下拉選項，我需要在一個選擇下拉菜單中顯示/隱藏選項。

下面的代碼顯示了我想實現的目標。

如果'column_select'選擇菜單選項設置爲'1列'，那麼'layout_select'選擇菜單隻能顯示'none'選項。

如果'column_select'選擇菜單選項設置爲'2 column'，那麼'layout_select'選擇菜單隻能顯示'layout 1'和'layout 2'選項。

如果「column_select」選擇菜單選項被設置爲「3列」則「layout_select」選擇菜單必須只顯示「佈局3」，「4佈局」和「佈局5」選項。

<select name="column_select" id="column_select"> 
    <option value="col1">1 column</option> 
    <option value="col2">2 column</option> 
    <option value="col3">3 column</option> 
</select> 

<select name="layout_select" id="layout_select"> 
    <!--Below shows when '1 column' is selected is hidden otherwise--> 
    <option value="col1">none</option> 

    <!--Below shows when '2 column' is selected is hidden otherwise--> 
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option> 

    <!--Below shows when '3 column' is selected is hidden otherwise--> 
    <option value="col3_mss">layout 3</option> 
    <option value="col3_ssm">layout 4</option> 
    <option value="col3_sms">layout 5</option> 
</select> 

到目前爲止，我所嘗試過的一切都失敗了......我是jQuery的新手。如果有人可以請幫助它將不勝感激。謝謝！

Answer 1

嘗試 -

$("#column_select").change(function() { 
    $("#layout_select").children('option').hide(); 
    $("#layout_select").children("option[value^=" + $(this).val() + "]").show() 
}) 

如果你要使用此解決方案你需要隱藏所有的元素從一個與你的文檔中的「無」值分開。功能齊全 -

$(document).ready(function() { 
    $("#layout_select").children('option:gt(0)').hide(); 
    $("#column_select").change(function() { 
     $("#layout_select").children('option').hide(); 
     $("#layout_select").children("option[value^=" + $(this).val() + "]").show() 
    }) 
}) 

演示 - http://jsfiddle.net/Mxkfr/2

編輯

我也許能得到這個得意忘形了一點，但這裏是一個使用原來的選擇列表中選擇一個高速緩存中的另一個例子確保在'column_select'列表更改後，'layout_select'列表被完全重置/清除（包括'none'選項） -

$(document).ready(function() { 
    var optarray = $("#layout_select").children('option').map(function() { 
     return { 
      "value": this.value, 
      "option": "<option value='" + this.value + "'>" + this.text + "</option>" 
     } 
    }) 

    $("#column_select").change(function() { 
     $("#layout_select").children('option').remove(); 
     var addoptarr = []; 
     for (i = 0; i < optarray.length; i++) { 
      if (optarray[i].value.indexOf($(this).val()) > -1) { 
       addoptarr.push(optarray[i].option); 
      } 
     } 
     $("#layout_select").html(addoptarr.join('')) 
    }).change(); 
}) 

演示 - http://jsfiddle.net/N7Xpb/1/

Answer 2

// find the first select and bind a click handler 
$('#column_select').bind('click', function(){ 
    // retrieve the selected value 
    var value = $(this).val(), 
     // build a regular expression that does a head-match 
     expression = new RegExp('^' + value), 
     // find the second select 
     $select = $('#layout_select); 

    // hide all children (<option>s) of the second select, 
    // check each element's value agains the regular expression built from the first select's value 
    // show elements that match the expression 
    $select.children().hide().filter(function(){ 
     return !!$(this).val().match(expression); 
    }).show(); 
}); 

（這遠非完美，但應該讓你有...）

Answer 3

如何：

（更新）

$("#column_select").change(function() { 
    $("#layout_select") 
     .find("option") 
     .show() 
     .not("option[value*='" + this.value + "']").hide(); 

    $("#layout_select").val(
     $("#layout_select").find("option:visible:first").val()); 

}).change(); 

（假設第三option應該有一個值col3）

實施例：http://jsfiddle.net/cL2tt/

注：

• 使用.change()事件定義的事件處理程序，執行時的select#column_select的值發生變化。
• .show()全部option s在第二個select。
• .hide()所有option S IN第二select其value不包含所選選項的value在select#column_select，使用attribute contains selector。

Answer 4

Initialy兩個下拉具有相同的選項，在firstdropdown您選擇的選項是隱藏在seconddropdown「值」是自定義屬性是獨特的。

$(".seconddropdown option").each(function() { 
    if(($(this).attr('value')==$(".firstdropdown option:selected").attr('value'))){ 
     $(this).hide(); 
     $(this).siblings().show(); 
    } 
}); 

Answer 5

痘痘或許是晚期，但我會建議

$(document).ready(function() { 
    var layout_select_html = $('#layout_select').html(); //save original dropdown list 

    $("#column_select").change(function() { 
     var cur_column_val = $(this).val(); //save the selected value of the first dropdown 
     $('#layout_select').html(layout_select_html); //set original dropdown list back 
     $('#layout_select').children('option').each(function(){ //loop through options 
     if($(this).val().indexOf(cur_column_val)== -1){ //do your conditional and if it should not be in the dropdown list 
      $(this).remove(); //remove option from list 
     } 
    }); 
}); 

Answer 6

而在2016年.....我這樣做（工作在所有瀏覽器，並且不產生「非法」 HTML）。

對於顯示/隱藏不同值的下拉選擇，將該值添加爲數據屬性。

<select id="animal"> 
    <option value="1" selected="selected">Dog</option> 
    <option value="2">Cat</option> 
</select> 
<select id="name"> 
    <option value=""></option> 
    <option value="1" data-attribute="1">Rover</option> 
    <option value="2" selected="selected" data-attribute="1">Lassie</option> 
    <option value="3" data-attribute="1">Spot</option> 
    <option value="4" data-attribute="2">Tiger</option> 
    <option value="5" data-attribute="2">Fluffy</option> 
</select> 

然後在你的jQuery更改事件添加到第一個下拉列表中選擇過濾第二個下拉。

$("#animal").change(function() { 
    filterSelectOptions($("#name"), "data-attribute", $(this).val()); 
}); 

而神奇的是這個小小的jQuery實用程序。

function filterSelectOptions(selectElement, attributeName, attributeValue) { 
if (selectElement.data("currentFilter") != attributeValue) { 
    selectElement.data("currentFilter", attributeValue); 
    var originalHTML = selectElement.data("originalHTML"); 
    if (originalHTML) 
     selectElement.html(originalHTML) 
    else { 
     var clone = selectElement.clone(); 
     clone.children("option[selected]").removeAttr("selected"); 
     selectElement.data("originalHTML", clone.html()); 
    } 
    if (attributeValue) { 
     selectElement.children("option:not([" + attributeName + "='" + attributeValue + "'],:not([" + attributeName + "]))").remove(); 
    } 
} 

}

這個小寶石跟蹤當前的過濾器，如果不同的是恢復原來的選擇（所有項目），然後刪除過濾項目。如果過濾器項目爲空，我們會看到所有項目。