Filtering values in a dropdown list box

Question

Hello Team
In the BSP application CRM_IC, we want a drop down list box to be filled based on the entry selected from another dropdown list box. We have all the entries for the second drop down box in ABAP internal table .However, we do not want a server round trip to happend in doing so. Thus we have used the attribute 'Onclientselect' and we are trying to call a java script function call on this event to filter this ABAP internal table . In this function, we would like to fill the contents of the second dropdown list box after reading the contents of the first dropdown list box. Please advice us as to how this can be achieved. Basically, we observed that ABAP server side script is not executed in the java function.
Thanks
Rony

Answer 1

Rony,
I have used the following technique to synchronize the
contents of two drop down list boxes.
<b>Scenario:</b>
The selection in listbox ddlbxSystemEquipNum, which I
will call "A", determines the contents of listbox
ddlbxModuleEquipNum, which I will call "B".
I use a JavaScript array to shadow the ABAP internal
table containing the possible values for listbox B.
When the page is initially displayed, listbox B is
populated from the ABAP internal table.
When a new selection is made in listbox A, I use the
onClientSelect event to call a JavaScript function,
updateModuleList(), to update the contents of listbox B
from the JavaScript shadow array based on the selected
value in listbox A.
<b>Code Excerpts:</b>
<u>Declare the JavaScript shadow array and listbox B update function</u>
<script language="javascript" type="text/javascript">
    var moduleArray = new Array();
    function updateModuleList() {
        var selSystem = frmNrg1100.ddlbxSystemEquipNum;
        var selModule = frmNrg1100.ddlbxModuleEquipNum;
        // Get selected system equipment number
        var selected_system =
                selSystem.options[selSystem.selectedIndex].value;
        // Clear module select options
        selModule.options.length = 0;
        // Add module select options for the selected system
        var j = 0;
        for (var k = 0; k < moduleArray.length; k++) {
            if ( (selected_system == moduleArray[k].system) ||
                                     moduleArray[k].system == "") {
                selModule.options[j++] = new Option(moduleArray[k].text,
                               moduleArray[k].value,
                               moduleArray[k].selected) ;
</script>
<u>Specify the onClientSelect event handler on list box A</u>
<htmlb:dropdownListBox
    id = "ddlbxSystemEquipNum"
    width      = "400"
    onClientSelect = "updateModuleList()"
<u>ABAP and JavaScript to populate internal table and shadow array of possible values for listbox B</u>
<%
loop...
        wa_module_options-system   = wa_customer_tool-equipment_num_t.
        wa_module_options-text     = tool_list_text.
        wa_module_options-value    = wa_customer_tool-equipment_num_m.
        wa_module_options-selected = selected.
        append wa_module_options to module_options.
%>
<script language="javascript" type="text/javascript">
    // Add all possible Module select options to a JavaScript array of objects
    moduleArray[moduleArray.length] = {  system:"<%=wa_module_options-system %>",
                                           text:"<%=wa_module_options-text %>",
                                          value:"<%=wa_module_options-value %>",
                                       selected:"<%=wa_module_options-selected %>" } ;
</script>
<%
endloop.
%>
Hope this helps.
Regards,
Shawn