限制服务器填充HTML下拉列表(w/ JavaScript)

Limit server populated HTML dropdown list (w/ JavaScript)

本文关键字：JavaScript 下拉列表 制服 服务器 填充 HTML      更新时间：2023-09-26

我想尝试使用JavaScript更改或限制下拉列表，或其他一些解决方案。不幸的是，我无法控制HTML输出的方式，我正在尝试更改客户端。下拉列表是在服务器端生成的，但我们希望为用户提供额外的选项，以进一步限制下拉列表中的选项。

我们不能编辑生成的内容，但是我们可以插入HTML。

一个建议的解决方案，这可能是不可能的，是使用JavaScript限制下拉列表。例如，下拉列表的格式为:

<SELECT ID="dropdown_1">
<OPTION VALUE=""    >None
<OPTION VALUE="1000">AB-ITEM 1 DESCRIPTION
<OPTION VALUE="2001">AB-ITEM 2 DESCRIPTION
<OPTION VALUE="50"  >AB-ITEM 8 DESCRIPTION
<OPTION VALUE="70"  >BB-ITEM 3 DESCRIPTION
<OPTION VALUE="100" >BB-ITEM 5 DESCRIPTION
<OPTION VALUE="2"   >ABB-ITEM 4 DESCRIPTION
</SELECT>

我想通过文本开头限制的内容，在本例中是AB-, BB-或ABB-。value没有规律也没有原因，它只是一个指数。我认为这是不可能的，因为这只是文本，而不是与属性相关联。

一个想法是:

  • 将列表存储到JavaScript数组
  • 只保留"TYPE-X%"这样的条目
  • 删除原始HTML列表
  • 用Array中存储的新列表替换

然而，我不确定这是否可能，如果是的话，创建这样的代码需要什么。如有任何帮助或参考函数或示例，将不胜感激。

一切皆有可能(jQuery):

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(":contains(TYPE-X)").show();
});

这样做的一个好处是，所有的选项仍然在那里，你只是看不到它们。所以返回到默认列表只需要调用:

$("#dropdown_1 option").show();

编辑regex:

$(document).ready(function() {
    $("#dropdown_1 option").hide();
    $("#dropdown_1 option").filter(function() {
        return $(this).text().match(/^AB-/);
    }).show();
});

你可以使用上面所示的正则表达式来过滤列表。

编辑:关于jQuery的注释，过滤器函数中的this是DOM元素本身。为了访问jQuery助手方法text()，我首先需要用jQuery函数包装DOM元素，就像上面编辑的那样。

多亏了BinaryTox1n，我找到了一个适合所有浏览器的解决方案来解决我的问题。然而，它与StackOverFlow上的其他解决方案拼凑在一起的方法略有不同。

区别在于如何处理OPTION s。虽然.hide()在一些浏览器上工作，但它与IE8(可能还有其他一些浏览器)不兼容。.hide()的替代方案和变体也失败了。.hide()的另一个问题是，您还需要使用.disable()。最后一个问题是，如果你有几个(大约20个)选项，只有2或3个是可见的，Chrome(可能还有其他浏览器)不能正确渲染下拉框。

找到的最佳方法是.remove()不需要的选项。没有兼容性问题，因为OPTION被简单地删除了。但是，如果需要的话，我还希望能够灵活地添加回退选项。下面是我将要使用的一个版本:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var regex_str = "^AAB-";
    var dd1 = $("#dropdown1 option");
  //Clone the 'None', Current, and All options into respective variables.
  //All options are stored in order to allow different selection criteria
    var all_Opt  = dd1.clone(true);
    var none_Opt = dd1.filter(":contains(None)").clone(true);
    var cur_Opt  = dd1.filter(function(){
        return $(this).text().match(regex_str);
    }).clone(true);
  //Remove all options and replace the 'None' and Current options
    dd1.remove();
    noneOpt.appendTo($("#dropdown1"));
    curOpt.appendTo($("#dropdown1"));
});
</script>

我唯一想添加的是使用不同的下拉框或其他触发器来更改的能力。

相关文章：