javascript隱藏/顯示下拉列表中的項目

Question

我開始研究javascripting，並想知道是否有人知道如何在html的下拉列表中隱藏值？

例如：帶有值的dropdwon列表

Select One   
Item1   
Item2    
Item3  
Item4  
Item5

我想隱藏項目4和5，就像這樣，並在點擊“顯示...”時顯示它。

Select One  
Item1  
Item2  
Item3  
Show 2 more items (Item 4 and 5 hidden)

那可能嗎？ 下面是我已經開始的一段代碼。

var css = select;
var markers = cluster.getMarkers();
var markersLength = markers.length;

var nextOption = new Option("Select One");
css.add(nextOption, 0);

for(var i = 0; i < markersLength; i++) {

    nextOption = new Option(markers[i].title);
    try {
        css.add(nextOption, -1);
    } catch (e) {
        css.add(nextOption, null);
    }
}

Answer 1

您需要通用解決方案，因此請使用類標記more選項和隱藏項。

事實證明，你不能始終如一的風格，出option S IN一個select跨瀏覽器的，所以你需要動態改變列表選項：請參考這個問題：如何隱藏的CSS一個<select>菜單中的<選項>？

最終解決方案（從另一個隱藏`select`追加元素）：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/12/

HTML：

Select One   
<select class="hidden">
    <option>Item4</option>
    <option>Item5</option>
    <option>Item6</option>
    <option>Item7</option>
<select>
<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option class="more">More</option>
</select>

jQuery的：

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').remove();
        $select.append($('.hidden').children());
    }
});

上一個信息：

然后select更改事件，隱藏more選項並顯示隱藏的元素：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/2/

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').hide().prevAll('.hidden').show();
    }
});

在select s中似乎有一個奇怪的錯誤，因為最后一個項目始終可見（即使在樣式化時也是如此！）。 我現在添加了一個空白條目來解決這個問題。 這也是為什么我沒有把隱藏的項目放在更多的后面，因為最后一個總是顯示（多么奇怪的錯誤 - 已經問過這個新問題：為什么總是顯示最后一個選擇選項，即使在樣式化時也是如此）。

您還需要清除所選的“更多”值，因為它將不再存在。

例如http://jsfiddle.net/TrueBlueAussie/93D3h/3/

$('select').change(function () {
    var $select = $(this);
    if ($select.val() == "More") {
        $('.more').hide().prevAll('.hidden').show();
        $select.val('');
    }
});

跟進：

基於我的相關問題，我指出了這一點：如何使用CSS隱藏<select>菜單中的<option>？ 顯然，您無法一致地設置選擇選項的樣式，因此動態地將項目添加到列表將是理想的解決方案。

Answer 2

這是我的解決方案：

HTML

    <select id="test">
    <option value="1">Select One</option>
    <option value="2">Item 1</option>
    <option value="3">Item 2</option>
    <option value="4">Item 3</option>
    <option value="5">Select Two</option>
    <option value="6">Item 4</option>
    <option value="7">Item 5</option>
    </select>

腳本

    var array1 = ["1","6","7"];
    var array2 = ["1","2","3","4"];
    var arrayAll = ["1","2","3","4","5","6","7"];
    function hideOptions(array) {
    for (var i = 0; i < array.length; i++) {
        $('#test option[value="' + array[i] + '"]').hide();
    }
    }

    function showOptions(array) {
    for (var i = 0; i < array.length; i++) {
        $('#test option[value="' + array[i] + '"]').show();
    }
    }


    $("#test").change(function(){
    if($("#test").val()=="5"){ 
        hideOptions(array2);
        showOptions(array1);
    }
    if($("#test").val()=="1"){ 
        hideOptions(array1);
        showOptions(array2);
    }
    });

    hideOptions(array1);

這是小提琴

Answer 3

怎么樣的：

<head>
  <script type="text/javascript">
  function makeDynamicOption(target, threshold, messageMore, messageLess) {
    var allOptions = collectOptions();
    target.addEventListener("change", updateOptions, false); // Use your own event manager
    showOptions(threshold);
    addMessage(messageMore);

    // ---

    function collectOptions() {
      var options = [];
      for(var ii=0; ii<target.options.length; ii++) {
        options.push(target.options[ii]);
      }
      return options;
    }

    function updateOptions() {
      var selectedText = this.options[this.selectedIndex].text;
      if (selectedText == messageMore) {
        showOptions(allOptions.length);
        addMessage(messageLess);
      } else if (selectedText == messageLess) {
        showOptions(threshold);
        addMessage(messageMore);
      }
    }

    function showOptions(upToIndex) {
      removeOptions();
      for (var ii=0; ii<upToIndex; ii++) {
        target.options[ii] = allOptions[ii];
      }
    }

    function removeOptions() {
      while(target.options.length > 0) {
        target.removeChild(target.options[0]);
      }
    }

    function addMessage(message) {
      target.options[target.options.length] = new Option(message, "");
    }
  }
  </script>
</head>

<body>
  <select id="foo">
    <option value="value1">item1</option>
    <option value="value2">item2</option>
    <option value="value3">item3</option>
    <option value="value4">item4</option>
    <option value="value5">item5</option>
  </select>
  <script type="text/javascript">
  makeDynamicOption(
    document.getElementById("foo"),
    3,
    "More...",
    "Less..."
  );
  </script>
</body>

此設計將lib部分（在HEAD中作為外部腳本鏈接）與激活部分分開。 它還允許您在生成視圖時注入本地化文本，並保留現有選項，以防您有其他腳本與它們交互。 請注意，您仍應使用自己的事件管理器，而不是直接使用addEventListener，如腳本中所示，以獲得更好的跨瀏覽器支持。

編輯：這是腳本的工作原理：

您可以在要擴充的選擇對象上調用makeDynamicOptions()函數，傳遞要顯示的選項數，以及用於展開/折疊其他選項的消息。 消息可以由視圖管理器寫入，即如果需要可以很容易地進行本地化。
第一個初始化步驟會看到收集所有原始選項，以便在用戶想要擴展選擇時可以添加它們。 請注意，我們收集對象本身，而不僅僅是它們的值/文本屬性值，因為其他腳本可以引用這些對象。
第二個初始化步驟在select上注冊一個change處理程序，以便在選項列表上觸發更新。 該腳本使用addEventListener ，但是應該替換一個自己的事件管理機制，以獲得更好的跨瀏覽器支持。
最后的初始化步驟將選擇折疊到預期的起始位置。
其余的非常簡單。 用戶選擇一個選項后，腳本將通過分析所選選項的文本並將其與提供的展開/折疊標簽進行比較來確定是否應重新填充選項列表。 如果要重繪選項，則腳本將刪除所有選項，添加預期選項，然后添加新的展開/折疊消息。

HTH。

javascript隱藏/顯示下拉列表中的項目

問題描述

3 個解決方案

解決方案1
1 已采納 2014-08-04 09:31:02

最終解決方案（從另一個隱藏`select`追加元素）：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/12/

HTML：

jQuery的：

上一個信息：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/2/

例如http://jsfiddle.net/TrueBlueAussie/93D3h/3/

跟進：

解決方案2
0 2014-08-04 10:05:06

解決方案3
0 2014-08-04 10:25:42

javascript隱藏/顯示下拉列表中的項目

問題描述

3 個解決方案

解決方案1 1 已采納 2014-08-04 09:31:02

最終解決方案（從另一個隱藏select追加元素）：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/12/

HTML：

jQuery的：

上一個信息：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/93D3h/2/

例如http://jsfiddle.net/TrueBlueAussie/93D3h/3/

跟進：

解決方案2 0 2014-08-04 10:05:06

解決方案3 0 2014-08-04 10:25:42

解決方案1
1 已采納 2014-08-04 09:31:02

最終解決方案（從另一個隱藏`select`追加元素）：

解決方案2
0 2014-08-04 10:05:06

解決方案3
0 2014-08-04 10:25:42