Overview
Dropdown lists with the ability to select a single value are described in the section Dropdown lists. We build on this and allow the user to select multiple values.

In principle, this is done with the HTML addition "multiple" in the select tag. However, there are some details to consider and some interesting additional options. We start with an example.

Example: Selecting multiple contact persons

Our dropdown for selecting a single contact person looks like this:

ABAP
data:
   kunnr        
type kna1-kunnr,
   parnr        
type knvk-parnr,
   ddl_contacts
 type string.

HTML
<select class="inputselect"  name="parnr" data-s10dropdownlist="ddl_contacts" data-s10options="hidekeys"></select>

 

We add "multiple" here and specify by size="7" that up to 7 entries are to be displayed at the same time:

HTML
<select class="inputselect"  name="parnr"
      data-s10dropdownlist
="ddl_contacts" data-s10options="hidekeys" multiple size="7">
</
select>

       

And already the user can select multiple values, whereby the selection of additional values on the desktop is done with Ctrl+Click; in Tablet and Phone the browsers have different representations of the multiple dropdown.

However, it doesn't quite work like this yet, because we get the following error message when entering more than one value from the S10 framework

This is because a list of partner numbers is now sent to the application instead of a single partner number, which has no place in the single field "parnr". We therefore define another string variable "parnrlist":

data:
   kunnr        
type kna1-kunnr,
   parnr        
type knvk-parnr,
   parnrlist    
type string,

   ddl_contacts
 type string.

and put it as a variable in <select>:

HTML
<select class="inputselect"  name="parnrlist"
      data-s10dropdownlist
="ddl_contacts" data-s10options="hidekeys" multiple size="7">
</
select>

Now the input works and our variable "parnrlist" receives all selected key values as value, each separated by a comma. Here is the display in the ABAP debugger:

As always with variable binding in the S10 framework, this works both ways, i.e. if we populate the variable "parnrlist" with a list of partner numbers, the corresponding rows are selected in the multiple-dropdown.


Representation by checkboxes
The standard display of the multiple-dropdown in the browser is not very popular with users, at least on the desktop, because the Ctrl key must be pressed to check several values, and if one forgets to do so, all previous selections are deleted. With long lists, it is also easy to lose track of what you have selected.

Let's take our example of the country selection again, now as a multiple selection:


ABAP
data:
 land1 
type kna1-land1.

HTML
<label class="label output" name="land1"></label><br>
<select class="inputselect" name="countrylist" multiple size="12"
    
style
="width: 240px;"
     data-s10dropdownlist='land1@dropdownlist'>
</select>

By making two small additions to HTML, we can achieve the following display, which is more pleasant for the user:

Here the value selection is done by checkboxes and the current selection is displayed above the checkboxes.

HTML
<label class="label output" name="land1"></label><br>
<select class="inputselect" name="countrylist" multiple size="12"
         style="width: 240px;"
       
data-s10dropdownlist='land1@dropdownlist'>
</select>

<div class="selecttext" style="width: 240px;"></div>
<div class="selectlist" style="width: 240px; max-height: 200px; overflow-y: auto; overflow-x: hidden; border: 1px solid lightgray;"></div>

The first <div> element with CSS class "selecttext" contains the values selected so far. If the display is without the key values, i.e. the country codes, the texts are set here.

The second <div>  element with CSS class "selectlist" contains the display of the value list in the form of checkboxes. Through the style attributes, we ensure that a vertical scroll bar is displayed if required.

You can also choose the display via checkboxes without the upper value display bar by omitting the first <div> with CSS class "selecttext".


For extensive lists of values, it is also convenient to show two small pushbuttons that select all values or delete all selections:

This is achieved by displaying two icons "select_all.png" and "deselect_all.png" which, when clicked, select or deselect all values with the help of the function  S10DropdownSelectAll():

<img src="../../../icons/select_all.png"
  style="height: 24px; border: 1px solid lightgray; padding: 2px; margin: 2px 0px;"
 
onclick="S10DropdownSelectAll(this);"
 
title="Alle selektieren">

<img src="../../../icons/deselect_all.png"
  style="height: 24px; border: 1px solid lightgray; padding: 2px; margin: 2px 6px;"
 
onclick="S10DropdownSelectAll(this, false);"
 
title="Alle deselektieren" />


The display bar for the values cuts off the further values from the specified width. If you prefer to display more lines with all values instead, this is possible with the CSS style "white-space:normal":

<div class="selecttext" style="width: 240px; white-space: normal;"></div>

 

Filter values
If many values are offered for selection, you can offer the user to filter the values by specifying a search string.

Example:

  

For implementation, it is sufficient to add an input field of the class "selectfilter":

select class="inputselect" multiple

  name="visit_zmkey_list" data-s10dropdownlist='ddl_zms' data-s10options='hidekeys'>

</select>

 

<div class="selecttext" style="width: 300px;"></div>

<div class="selectlist"

  style="width: 300px; height: 160px; overflow-y: auto;

  overflow-x: hidden; border: 1px solid lightgray;">

</div>

 

<input class="selectfilter" placeholder="&#x1F50E;" type="search">

 


Dynamic expansion of the entire list

On small devices, sections that are scrollable by themselves are somewhat complicated to handle. On the other hand, extensive lists of values take up a lot of space if they are displayed without scrolling. An elegant way out is to show the value list only when needed. This can be done quite easily with HTML5 and, like all the previous variants, is completely independent of the ABAP level.

As an example, let's take a list of possible participants in a meeting. At first, we only show the participants selected so far:

  

We can see the participants already entered at a glance and click on "Change participant list" to make changes:

The entire list of participants is displayed and we can use the convenient screen scrolling for very long lists.
 
We add two more participants and close the list:

 

To implement this, we use the HTML5 functions <details> and <summary>, which automatically show and hide sub-areas:

HTML

<label class="label">Participants</label><br>
<select class="inputselect" name="parnrlist" multiple
    
data-s10dropdownlist="ddl_contacts" data-s10options="hidekeys">
</select>
<div class="selecttext" style="width: 240px; white-space:normal; color: #3f00ff; font-size: 14px; font-weight: bold;"></div>
<details>
 
<summary style="font-size: 13px;">
     Change participant list
  
</summary>
   <div class="selectlist" style="width: 240px;  border: 1px solid lightgray;"></div>
</details>


Components: S10 Framework