javascript隐藏/显示下拉列表中的项目

时间：2014-08-04 09:21:45

标签： javascript jquery html

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

例如：带有值

的dropdwon列表 
Select One   
Item1   
Item2    
Item3  
Item4  
Item5

我想隐藏第4项和第5项，就像这样，并在＆＃34; Show ...＆＃34;点击。

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);
    }
}

3 个答案:

答案 0 :(得分：1)

您需要通用解决方案，因此请使用类标记more选项和隐藏项。

事实证明，您无法在option跨浏览器中始终标注select，因此您需要动态更改列表选项：请参阅此问题：How to hide a <option> in a <select> menu with CSS?

最终解决方案（追加来自另一个隐藏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中似乎有一个奇怪的错误，因为最后一项总是可见的（即使是样式化的！）。我现在添加了一个空白条目来解决这个问题。这也是为什么我没有把隐藏的项目放在更多的后面，因为最后一个总是显示（多么奇怪的bug - 已经问过这个问题：{ {3}}）。

您还需要清除＆＃34;更多＆＃34;的选定值。因为那将不复存在。

e.g。 Why is last select option always shown, even when styled out 

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

跟进：

根据我的相关问题，我指出了这一点：http://jsfiddle.net/TrueBlueAussie/93D3h/3/显然你不能一致地设定选择选项，因此动态地将项目添加到列表将是理想的解决方案。

答案 1 :(得分：0)

这是我的解决方案：

<强> 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);

这是fiddle

答案 2 :(得分：0)

如下：

<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。

相关问题
最新问题