html根據javascript中另一個select標記中的值動態過濾選擇選項

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是Counterrie的完整列表，其代碼已經填充：

    <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，..），但我希望他從具有更全名稱的國家（法國，德國..）的更全面列表中進行選擇。 options值會將他重定向到所選國家/地區：例如，他選擇了德國，而我的功能將他帶到：location.href =“ xxx.php＃” + element.value;），在這種情況下為'de'。

如何實現：創建第三個SELECT標記，根據第一個標記從完整的下拉列表中添加OPTIONS？ ..是否有一種解決方案，僅過濾第二個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');