限制服务器填充HTML下拉列表（使用JavaScript）

我想尝试使用JavaScript或其他解决方案更改或限制下拉列表。不幸的是，我无法控制HTML出现的方式，我试图改变客户端。下拉列表是服务器端生成的，但我们想给用户额外的选项来进一步限制下拉列表中的选择。限制服务器填充HTML下拉列表（使用JavaScript）

我们不能编辑生成的内容，但我们可以插入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列表
替换列表中存储的新列表

但是，我不确定这是否可行，如果是，那么需要创建这样的c颂。任何帮助或引用的功能或例子将不胜感激。

来源

2013-03-08 Phillip

您是否打电话从客户端到服务器以启动select元素的填充？如果是这样，请显示此代码 – 2013-03-08 19:14:02

我认为这是PL/SQL，并且尝试维护它是一件大事。任何更新都要求我们恢复所有非基线过程，因此我们尽可能远离它们。 – Phillip 2013-03-08 19:17:45

一切皆有可能（使用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中的过滤函数是DOM元素本身。为了访问jQuery帮助器方法text()，我首先需要用上面编辑的jQuery函数来包装那个DOM元素。

来源

2013-03-08 19:12:45 BinaryTox1n

我不认为这可能是那么简单......但它就是这么简单！感谢你能这么快回复。我能看到的唯一问题是，不是'TYPE-AB-'，而是'AB-'。所以我们可能会有'BB-'和'ABB-'类型，并且包含'BB-'会拉动两者。有没有办法表示像正则表达式中的字符串或文本的开始（我认为是'^'）。编辑：更新了问题以反映这一点。 – Phillip 2013-03-08 19:22:08

请注意，这些选项都不包含您不希望用户访问的信息，也不会让用户有能力做出不需要的操作。当他们被隐藏时，他们只是从聪明的用户点击右键。 – 2013-03-08 19:23:37

@Phillip我在我的答案中添加了一个正则表达式示例。另外，凯尔的观点非常有效。任何与JS完成的事情都可以很容易地撤消。 – BinaryTox1n 2013-03-08 19:27:46

感谢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>

我想补充的唯一事情是使用不同的下拉框或其他一些触发能力改变这一点。

来源

2013-03-13 14:24:36 Phillip

限制服务器填充HTML下拉列表（使用JavaScript）

回答

相关问题