html根据javascript中另一个选择标签中的值动态过滤选择选项

Question

我有两个 Select 标签：第一个是动态填充的 php 脚本（扫描我的非空文件夹）并给我国家代码如下：

         <select name="countries" id="countries"> 
         <option>fr</option>
         <option>gr</option>
         <option>it</option>
         <option>gr</option>
         <option>pl</option>
         <option>gb</option>
         <option>es</option>
         <option>pt</option>
                  ... 
         (dynamically populated from a php script)
    </select>

第二个 SELECT 是一个完整的国家/地区列表，其代码已经填充：

    <select name="ctCodes" id="ctCodes">
    <option>--select--</option>
    <option value="fr">France</option>
    <option value="nl">Netherlands</option>
    <option value="bl">Belgium</option>
    <option value="rs">Russia</option>
                   ... 
      (full ready list with all countries and code as value)
    </select>

我不希望我的访问者从第一个 SELECT 中进行选择，因为它只是代码（fr、de、..），但我希望他从更全面的列表中选择全名国家（法国、德国.. ) 选项值会将他重定向到所选国家：例如，他选择德国，我的函数将带他：location.href = "xxx.php#" + element.value;) 在这种情况下为'de'。

如何实现这一点：创建第三个 SELECT 标记，根据第一个从完整下拉列表中添加选项？ ..是否有解决方案只过滤第二个 SELECT tAG 中的全名列表以仅保留第一个中加载的选项？ ...我知道这是 sql 或 ms-access 的纳秒工作！.. 但是可以使用 html 和 javascript 来完成吗？ 我很感激所有的答案。

Answer 1

你最好在 php 中生成这个过滤选择，因为你已经有了你需要的国家代码和全名。但是由于您可能无法使用 jQuery 更改这里的 javascript 解决方案：

var countryCodes = [],
    $filtered;

$('#countries option').each(function() {
    countryCodes.push($(this).text());
});

$filtered = $('#ctCodes').clone();
$filtered.attr('id', 'filtered');

$filtered.find('option').each(function() {
    var $this = $(this);
    if (countryCodes.indexOf($this.val()) === -1) {
        $this.remove();
    }
});

$filtered.insertAfter('#ctCodes');