JavaScript - Filter Dropdowns

-1

我確定這是非常明顯的，但我根本找不到它。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，名稱等都是系統驅動的，不能更改。此外，每個下拉菜單中的所有選項都是由數據庫驅動的，不能更改。

謝謝。

來源

2017-06-14 Kevin Middleton

在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>

來源

2017-06-14 08:03:44

不知道我能跟進這個問題另一個，但是有沒有辦法將標籤隱藏到（例如）'BS'之前和之前？ –

你可以選擇這兩個字母像這樣：

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

這是假設的選擇是唯一的名稱。

來源

2017-06-14 08:00:03 Adder

JavaScript - Filter Dropdowns

回答

相關問題