jquery - 使用 jQuery 过滤 SELECT 列表

Question

我正在尝试找出如何动态过滤 SELECT 列表。

我有一个这样的列表:

<div class="domainreginput" id="domainexisting_domain">
<select id="incartsld">
<option value="example.com">example.com</option>
<option value="example2.com">example2.com</option>
<option value="example.net">example.net</option>
<option value="example.rocks">example.rocks</option>
</select> <input type="submit" value="Click to Continue >>" />
</div>

该列表可以包含具有任何扩展名的域名。但出于此特定目的，我只想显示具有某些 TLD 的域。在此示例中，假设为 .com 和 .net。

因此，如果我提供允许的 TLD 列表，如下所示:

var allowedTLD = [".com", ".net"];

如何使用 jQuery 从 SELECT 列表中删除任何没有与允许数组中的 TLD 匹配的域？

我对 jQuery 相当陌生，并尝试四处寻找这个问题的答案，但找不到类似的东西。

如果有帮助，这是用于匹配允许的域的实际正则表达式:

/\.(com|net|org|biz|info|name|tv|cc|me|pro|mobi|cm|co|ws)$/i

Answer 1

这是一种方法:

var allowedTLD = [".com", ".net"];
$('#incartsld option').filter(function () {
    return !($.inArray('.'+$(this).val().split('.').pop(), allowedTLD) > -1)
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="domainreginput" id="domainexisting_domain">
    <select id="incartsld">
        <option value="example.com">example.com</option>
        <option value="example2.com">example2.com</option>
        <option value="example.net">example.net</option>
        <option value="example.bix">example.biz</option>
    </select>
    <input type="submit" value="Click to Continue >>" />
</div>

或者:

var allowedTLD = /\.(com|net|org|biz|info|name|tv|cc|me|pro|mobi|cm|co|ws)$/i;
$('#incartsld option').filter(function() {
  return ($(this).val().match(allowedTLD) == null)
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="domainreginput" id="domainexisting_domain">
  <select id="incartsld">
    <option value="example.com">example.com</option>
    <option value="example2.com">example2.com</option>
    <option value="example.net">example.net</option>
    <option value="example.bix">example.biz</option>
  </select>
  <input type="submit" value="Click to Continue >>" />
</div>