JavaScript - 过滤器下拉列表 - JavaScript - Filter Dropdowns 小贝子编程网

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

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

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

谢谢。

>在过滤时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>

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

$(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);
});
});

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

JavaScript - 过滤器下拉列表

相关内容

最新更新

热门标签：