Select input description

The Select input control show to the user a list of items and allows to choose one of them. If you need that the user can choose more than one item, you can consider to use the Multiselect control.

Select CSS rules

Select input at designtime

The Select input control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

• Top property
• Left property
• Width property
• Height property
• Locked property

Select input at runtime

The Select input control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

• Name property
• Event property
• Items property
• ItemIndex property
• Value property
• Title property
• Classes property
• Hidden property
• Disabled property
• Size property
• TabIndex property

Select input events

The Select input control put at your disposition the below events handlers:

• Change event
• Focus event
• Blur event
• Click event
• DblClick event
• MouseUp event
• MouseDown event
• MouseMove event
• MouseEnter event
• MouseLeave event
• ContextMenu event
• Events variables

Select input designtime properties

Select input Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Select input Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Select input Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Select input Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Select input Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Select input runtime properties

Select input Name property

Runtime. String variable. The Name control property stores the name of the Select input control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "select1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Select input Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Select input Items property

Runtime. Array of strings variable. The Items control property stores the items that are shown in the control. You can set this variable at designtime using the Array editor dialog or at runtime, like any other array variable.

Select input ItemIndex property

Runtime. Number variable. The ItemIndex control property stores the currently item index shown in the control. You can set this variable to establish the selected item in the control, or use this variable to know the item which has been selected by the user.

// Select the first item in the control views.view1.select1.itemIndex = 0;

Select input Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

// Set a new title for the control views.view1.select1.title = 'My new title';

Select input Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

// Set some additional classes for the control views.view1.select1.classes = 'one-class another-class';

Select input Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

// Hide select1 views.view1.select1.hidden = true; // Show select1 views.view1.select1.hidden = false; // Toggle select1 views.view1.select1.hidden = !views.view1.select1.hidden;

Select input Disabled property

Runtime. Boolean variable. The Disabled control property determines if the control appear disabled to the user or not. Set to "true" to disable the control, or to "false" to enable the control (by default).

// Disable select1 views.view1.select1.disabled = true; // Enable select1 views.view1.select1.disabled = false;

Select input Value property

Runtime. String variable. The Value control property is "null" by default and stores the selected item text inside the control Change event after the user choose one of the available select items.

Select input Size property

Runtime. String variable. The Size control property determines the size of the control. By default the Select input have the "sm" (small) size, and, you can use the available app constansts "app.size.*" to set this variable, for example:

// Set the input size to "md" (medium) views.view1.select1.size = app.size.md; // Set the input size to "lg" (large) views.view1.select1.size = app.size.lg;

Select input TabIndex property

Select input events

Select input Change event

The Change event handler is fired when the user changes the value and then release the focus (changing to another, for example) of the input control. See also the available events variables.

Select input Focus event

The Focus event handler is fired when the when the Select input control receive the user focus. This event is the partner of the Blur event that you can see below. See also the available events variables.

Select input Blur event

The Blur event handler is fired when the when the Select input control loss the user focus. This event is the partner of the Focus event that you can see above. See also the available events variables.

Select input Click event

The Click event handler is fired when the user click or tap into the Select input control. See also the available events variables.

Select input DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Select input control. See also the available events variables.

Select input MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Select input control. See also the available events variables.

Select input MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Select input control. See also the available events variables.

Select input MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Select input control. See also the available events variables.

Select input MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Select input control. See also the available events variables.

Select input MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Select input control. See also the available events variables.

Select input ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Select input control, which occur when the user click with the right mouse button into the Select input control. See also the available events variables.

Select input events variables

The below JavaScript variables are available in all the referred Select input control events handlers:

---