Linked selection fields through client side scripting

Today I will revisit one of the oldest, but very much useful tricks related to web forms. Most of the forms nowadays need relationship to be established between two fields. For example when I select Product interest in one list it should filter Sub product interest in another field. Today I will explain how this can be achieved on Sage CRM screens through fairly simple configurations and client side scripting
New Stuff:  Sage CRM and IIS authentication settings
Let’s consider an example, in Person screen we want to filter “Sub Selection” (pers_subselection) field based on the value selected in “Main Selection” (pers_mainselection) field. Before moving ahead we need to configure values in both this field using some logic so that it can be filtered easily using jQuery. The logic that I have used is the code value of “Main Selection” needs to be available in code of “Sub Selection” field i.e. based on code “A” I can search “A1, A2”. When we define this logic in fields it becomes easier for configurations in case new options are getting added over the time. We don’t have to go to server side for querying option values from translations in that case which means faster processing.

After configuring the values, we need to add below syntax in the Custom content of the screen where we have added above two fields.
<script language=’javascript’>
if(window.attachEvent)
{
window.attachEvent(“onload”,FilterSelection);
}
else if(window.addEventListener)
{
window.addEventListener(‘load’, FilterSelection, false);
}
function FilterSelection()
{
var options = $(“#pers_subselection”).html();
$(“#pers_mainselection”).change(function(e) {
var text = $(“#pers_mainselection :selected”).text();
$(“#pers_subselection”).html(options);
if (text == “–None–“) return;
$(‘#pers_subselection :not([value^=”‘+ text +'”])’).remove();
$(“#pers_subselection”).append(“<option value=” selected=true>–None–</option>”);
});
}
</script>
After adding above script, you will be able to filter the values from above 2 fields as displayed in following screenshot.

Happy scripting!
Also Read:
1) Sort Dropdown list items using jQuery
2) Sorting Country Selection
3) Dropdown Sync in Sage CRM System
4) Changing max allowable length of Text field using Jquery
5) Limit number of characters in Sage CRM fields