j-Dropdown

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

Configuration:

required {Boolean} (optional) enables "required" (default: false)
items {String} (optional) static items key1|value1, key2 with value, key3|value
icon {String} (optional) icon for label e.g. home, cog, etc.
label {String} (optional) label (default is HTML content)
type {String} (optional) can be number (converts String values to Number)
datasource {String} path to data-source (must be array)
text {String} determines a property name for text (in data-source), default: name
value {String} determines a property name for value (in data-source) default: id
empty {String} (optional) adds an empty field
disabled {Boolean} (optional) disables this component
if {String} (optional) arrow function as a condition for filtering of datasource, example: if:n => !n.removed

Use it with <ui-component name="dropdown">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:400px">
	<ui-component name="dropdown" path="form.idcategory" config="datasource:datasource;empty:;required:true;type:number;icon:navicon">Category</ui-component>
	<br />
	<ui-component name="dropdown" path="form.idinline" config="items:,A|1,B|2,C|3">Inline options</ui-component>
</div>

<script>
	var datasource = [{ name: 'A', id: 1 }, { name: 'B', id: 2 }, { name: 'C', id: 3 }];
	var form = {};
</script>