1

我想尝试使用 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 列表
  • 替换为存储在数组中的新列表

但是，我不确定这是否可行，如果可行，创建这样的代码需要什么。任何帮助或对功能或示例的引用将不胜感激。

4

2 回答 2

2

一切皆有可能（使用 jQuery）：

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

这样做的一个优点是所有选项都仍然存在，您只是看不到它们。因此，返回默认列表所需要的只是调用：

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

编辑正则表达式：

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

您可以使用如上所示的正则表达式过滤您的列表。

编辑：关于 jQuery 的注释，this在 filter 函数中是 DOM 元素本身。为了访问 jQuery 帮助器方法text()，我首先需要使用 jQuery 函数包装该 DOM 元素，如上面编辑的那样。

于 2013-03-08T19:12:45.157 回答
0

多亏了 BinaryTox1n，我找到了一条与我的问题兼容的全浏览器解决方案。然而，这是一种与 StackOverFlow 上的其他解决方案略有不同的方法。

不同之处在于如何处理OPTIONs。虽然.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>

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

于 2013-03-13T14:24:36.250 回答