JavaScript - 过滤下拉列表

Question

我确信这是非常明显的，但我根本无法弄明白。

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

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，名称等都是系统驱动的，无法更改。此外，每个下拉列表中的所有选项都是数据库驱动的，不能更改。

感谢。

Answer 1

在Set_Dpt_List()过滤时使用innerHTML代替value，因为部门代码现在显示在选项的显示值中。

您的过滤功能应该是：

var opts = $options.clone().filter(function() {
return (this.innerHTML.substr(0, 1) == facc || this.value == ""); //innerHTML instead of value
});

完整代码（进行一些修改以使其正常工作）：

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 = '#' + 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 = $('select[data-ttqseqn="51"]').val();
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.innerHTML.substr(0, 1) == facc || this.value == "");
});
$('select[data-ttqseqn="52"]').html(opts);
} else {
$('select[data-ttqseqn="52"]').html($options.clone());
}
}
Init_Page();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td align="right">Department</td>
<td>
<select name="ANSWER.TTQ.MENSYS.7" id="ANSWERTTQMENSYS7" 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="ANSWERTTQMENSYS8" 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>

Answer 2

你可以像这样选择两个字母：

$(document).ready(function(){
    $(document.body).on('change', '[name="ANSWER.TTQ.MENSYS.8"]', function() {
        var twoletters = $(this).find('option:selected').text().substr(0,2);
        console.log(twoletters);
    });
});

这假定选择的名称是唯一的。