JavaScript - 过滤下拉菜单

我确信这很明显，但我根本无法弄清楚。

我有两个下拉列表，第二个下拉列表的内容根据第一个下拉列表中的选择进行过滤。目前的过滤器始终基于两个下拉匹配中“选项值”的第一个字母。下面是一个例子：

HTML

<table>
<tr>
<td align="right">Department</td>
<td>                        
<select name="ANSWER.TTQ.MENSYS.7" id="ANSWER.TTQ.MENSYS.7." data-ttqseqn="51" class="forminfree">
<option value=""></option>
<option value="DE">Department DE</option>
<option value="HS">Department HS</option>
<option value="BS">Department BS</option>
</select>
</td>
</tr>           

<tr>
<td align="right">Sub-Department</td>
<td>                        
<select name="ANSWER.TTQ.MENSYS.8" id="ANSWER.TTQ.MENSYS.8." data-ttqseqn="52" class="forminfree">
<option value=""></option>
<option value="BSCCC01">Sub-Department 1</option>
<option value="BSCCC02">Sub-Department 2</option>
<option value="BSCCC03">Sub-Department 3</option>
<option value="HSCCC04">Sub-Department 1</option>
<option value="HSCCC05">Sub-Department 2</option>
<option value="HSCCC06">Sub-Department 3</option>
<option value="DECCC07">Sub-Department 1</option>
<option value="DECCC08">Sub-Department 2</option>
<option value="DECCC09">Sub-Department 3</option>
</select>
</td>
</tr>
</table>

JavaScript

var $options = "";

function Init_Page() {

// Ensure the sub-department dropdown is filtered every time the department changes
$('select[data-ttqseqn="51"]').bind('change', function() {
Set_Dpt_List(this.value);
});

// Keep a copy of the full sub-department list from Page Load in $options
var dpt_sel = $('select[data-ttqseqn="52"]').attr('id');
dpt_sel = '#' + escape_selector(dpt_sel);
$options = $(dpt_sel + ' option').clone();

//If a department is already selected then filter the sub-department dropdown accordingly
var fac_sel = $('select[data-ttqseqn="51"]').attr('id');
var facc = get_value(fac_sel);
if (facc) {
Set_Dpt_List(facc)
};
}

function Set_Dpt_List(facc) {

if (facc) {
// If a department is selcted then only show sub-departments whose code begins with the same 1st character
facc = facc.substr(0, 1);
var opts = $options.clone().filter(function() {
return (this.value.substr(0, 1) == facc || this.value == "");
});
$('select[data-ttqseqn="52"]').html(opts);
} else {
$('select[data-ttqseqn="52"]').html($options.clone());
}
}

请注意，该示例将不起作用，因为它引用了代码中不存在的函数。

客户正在更改其编码结构，以便子部门代码的首字母不再与任何部门代码的首字母匹配。计划是将当前的“选项值”代码放在标签的开头，如下例所示：

<table>
<tr>
<td align="right">Department</td>
<td>
<select name="ANSWER.TTQ.MENSYS.7" id="ANSWER.TTQ.MENSYS.7." data-ttqseqn="51" class="forminfree">
<option value=""></option>
<option value="DE">Department DE</option>
<option value="HS">Department HS</option>
<option value="BS">Department BS</option>
</select>
</td>
</tr>
<tr>
<td align="right">Sub-Department</td>
<td>
<select name="ANSWER.TTQ.MENSYS.8" id="ANSWER.TTQ.MENSYS.8." data-ttqseqn="52" class="forminfree">
<option value=""></option>
<option value="CCC01">BS - Sub-Department 1</option>
<option value="CCC02">BS - Sub-Department 2</option>
<option value="CCC03">BS - Sub-Department 3</option>
<option value="CCC04">HS - Sub-Department 1</option>
<option value="CCC05">HS - Sub-Department 2</option>
<option value="CCC06">HS - Sub-Department 3</option>
<option value="CCC07">DE - Sub-Department 1</option>
<option value="CCC08">DE - Sub-Department 2</option>
<option value="CCC09">DE - Sub-Department 3</option>
</select>
</td>
</tr>
</table>

但是，我无法弄清楚如何从中提取要在过滤器中使用的第一个字母。有人可以帮忙吗？

请注意，“选择”ID、名称等都是系统驱动的，无法更改。此外，每个下拉列表中的所有选项都是数据库驱动的，不能更改。

谢谢。