• Demos
  • Docs
  • License
  • Download
  • Community
    • Forums
    • Blogs
    • Login
    • Register
  • About
    • About Us
    • Contact Us
    • FAQ
new updated free

  • Most Popular

  • Framework

  • Grid

  • Chart

  • Gantt Chart

  • Docking Layout

  • Web Components

  • Accordion

  • Badge

  • Button

  • Bootstrap

  • Calendar

  • Card

  • Carousel

  • Checkbox

  • ComboBox

  • Color Panel

  • Color Picker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • File Upload

  • Gauge

  • ListBox

  • ListMenu

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • Query Builder

  • RadioButton

  • RepeatButton

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Table

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Validator

  • Window

  • Framework

  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way Binding
  • App with Grid Binding
  • Form Binding
  • Handling User Input
  • Form Checkbox Binding
  • Form Checkbox Binding to Array
  • Form DropDownList Binding
  • Form Radio Input Binding
  • Form TextBox Binding
  • HTML Elements Binding
  • HTML Checkbox input Model Binding
  • HTML Input Binding
  • HTML Checkbox Binding to Array
  • HTML Number Input Binding
  • HTML Radio Button Binding
  • HTML Select Binding
  • HTML Select Multiple Binding
  • Loops Rendering
  • List Rendering with smart-for
  • Advanced List Rendering with smart-for
  • Grid Layout System
  • Overview
  • Advanced
  • Equal Width
  • How it works
  • Layout with span
  • Nested Grid
  • No Gaps
  • Options
  • Ordering
  • Stacked to Horizontal
  • Stack Layout System
  • Overview
  • Gaps
  • Options
  • Spacing
  • Stretch
  • Uneven Stretch

  • Accordion

  • Overview
  • Basic
  • Events
  • Methods
  • Expand Modes
  • In Tabs
  • With Tabs
  • Reorder
  • Using with Angular

  • Badge

  • Overview

  • Bootstrap

  • Buttons
  • Dropdowns
  • Input Groups
  • Modal

  • Button

  • Overview
  • Basic
  • Events
  • Images
  • Hover Glow effect
  • 3d
  • Blobs Button
  • Bootstrap Style
  • Progress Style
  • Change Style
  • Button Concept
  • Button Flip
  • Fizzy Button
  • Fancy Button
  • Flip Cover Button
  • Flush Button
  • Button with Icon
  • Fancy Icon
  • Rounded Button
  • Rounded Pulse Button
  • Sliced Button
  • Thin Buttons
  • Using with Angular

  • Card

  • Overview
  • Basic
  • Events

  • Carousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • Using with Angular

  • Calendar

  • Overview
  • Classic Display Mode
  • Custom Header
  • Events
  • First Day Of Week
  • Footer
  • Hotel Showcase
  • Important Days
  • List Display View
  • Locale
  • Methods
  • Min/Max Date
  • Multiple Months
  • Navigation Modes
  • Restricted Dates
  • Right To Left
  • Views
  • Week Numbers
  • Weeks Visibility
  • Using with Angular

  • Chart

  • Overview
  • Line and Area Series
  • Line Series
  • Stacked Line Series
  • 100% Stacked Line Series
  • Line Series with Labels
  • Line Series with Missing Points
  • Line Series with 50k Data Points
  • Line Series with Conditional Colors
  • Step Line Series
  • Spline Series
  • Spline Series with Color Bands
  • Area Series
  • 100% Stacked Area Series
  • Area Series with Missing Points
  • Area Range and Line Series
  • Column and Bar Series
  • Column Series
  • Stacked Column Series
  • Stacked and Grouped Column Series
  • 100% Stacked Column Series
  • Column Series with Conditional Colors
  • Column Range
  • Fixed Placement Columns
  • Bar Series
  • Column Series Spacing
  • Negative Bar Series
  • Column Series with Labels
  • Pie & Donut Series
  • Pie Series
  • Pie Series Legend
  • Donut Series
  • Logarithmic Axis
  • Columns with Logarithmic Axis
  • Columns with base 10 Logarithmic Axis
  • Logarithmic Axis Base Line
  • Logarithmic X Axis
  • Zooming (Range Selection)
  • Date X-axis Range Selection
  • Numeric X-axis Range Selection
  • Waterfall Series
  • Waterfall Series
  • Waterfall with Multiple Series
  • Financial Series
  • Candlestick Chart
  • OHLC Chart
  • Polar and Spider Series
  • Polar Chart
  • Partial Polar Chart
  • Polar Series Bands
  • Spider Chart
  • Funnel and Pyramid Series
  • Funnel Chart
  • Stacked Funnel Chart
  • Pyramid Chart
  • Stacked Pyramid Chart
  • Bubble Chart
  • Scatter Chart
  • Scatter Chart with 25k Data Points
  • Live Updates Performance
  • Add Data Points Dynamically
  • Color Bands
  • Sparklines
  • Styling and Layout
  • Axis Settings
  • Intervals and Steps
  • Systematic Colors Chart
  • Crosshairs
  • Color Schemes
  • Chart Background Image
  • Custom Styling
  • Custom Drawing
  • Chart Events
  • Chart Range Selector Events
  • Chart Methods
  • Chart Export and Printing
  • Using with Angular

    • CheckBox

    • Overview
    • Basic
    • Events
    • Images
    • Using with Angular

    • ComboBox

    • Overview
    • Auto Complete
    • Automatic Positioning
    • Basic
    • Button Position
    • Checkboxes
    • Multiple Selection Mode
    • Filterable
    • Item Template
    • Methods
    • Multiple Selection
    • Open Modes
    • Popup Resizing
    • Position
    • Token Template
    • Using with Angular

    • Color Panel

    • Overview
    • Apply Value Mode
    • Default
    • Grid
    • Hexagonal
    • Material Grid
    • Palette Mode
    • Radial
    • Spectrum Grid
    • Events
    • Localization
    • Tooltips
    • Using with Angular

    • Color Picker

    • Overview
    • Color Editing
    • Default
    • Grid
    • Hexagonal
    • Material Grid
    • Palette Mode
    • Radial
    • Spectrum Grid
    • Editing
    • Value Display Mode
    • Value Format
    • Using with Angular

    • DateTimePicker

    • Overview
    • Basic
    • Dropdown Display Mode
    • Dropdown position
    • Edit Modes
    • Formats
    • High Precision/Scientific
    • Localization
    • Time Zones
    • Using with Angular

    • DropDownButton

    • Overview
    • Auto Height
    • Auto Position
    • Button Position
    • Dropdown Position
    • Dropdown Resize
    • Open Modes
    • Events
    • Methods
    • Using with Angular

    • DropDownList

    • Overview
    • Auto Complete
    • Automatic Positioning
    • Basic
    • Button Position
    • Checkboxes
    • Multiple Selection Mode
    • Filterable
    • Item Template
    • Methods
    • Multiple Selection
    • Open Modes
    • Popup Resizing
    • Position
    • Token Template
    • Using with Angular

    • Docking Layout

    • Overview
    • Auto Hide Item
    • Auto Save/Load
    • Drop Position
    • Insert Before/After Item
    • Insert Outside Target Group
    • Insert Top Level Item
    • Inside Window
    • Item Dock & Undock
    • Layout Item
    • Layout Item Group
    • Remove Item
    • Snap Modes
    • State
    • Update Item
    • Visual Studio Showcase
    • Using with Angular

    • File Upload

    • Overview
    • Directory
    • Drop Zone
    • Events
    • File Zone
    • Images only
    • Item Template
    • Localization
    • Multiple
    • Show Progress
    • Using with Angular

    • Gantt Chart

    • Overview
    • Auto Height
    • Auto Schedule
    • Auto Scroll
    • Expand/Collapse
    • Custom Popup Editor
    • Custom Task Editor
    • Disable Drag Resize
    • Duration
    • Inverted Layout
    • State Load and Save
    • Localization
    • Many Tasks
    • Methods
    • Min/Max Task Dates
    • Nested Project
    • Nonworking Days
    • Nonworking Hours
    • Project Drag
    • Snap to nearest
    • Sync Project
    • Sync Project Drag
    • Task Columns
    • Task Connections
    • View
    • Using with Angular

    • Gauge

    • Overview
    • Analog Display Type
    • Basic
    • Change Font Size
    • Coercion
    • Custom Interval
    • Custom Needle
    • Date Scale
    • Integer 64-bit
    • Logarithmic Scale
    • Mechanical Action
    • Size-Mode Auto
    • Styling
    • Tick label settings
    • Using with Angular

    • Grid

    • Overview
    • Featured
    • Dashboard
    • Business
    • Spreadsheet
    • Spreadsheet from JSON
    • Financial Live Data
    • Auto-show Select Checkbox
    • Test App
    • Init
    • Default Init
    • Init from DIV
    • Init from Attribute
    • Import as ES6 Module
    • Smart App
    • Tree Grid
    • Tree Grid
    • Tree Grid Nested JSON
    • Tree Grid Icons
    • Tree Grid Large Data
    • Tree Grid Animation
    • Virtual Tree Grid
    • Virtual Tree Grid with Pagination
    • Appearance
    • Auto Size
    • Alternating Rows
    • Grid Lines
    • Merged Cells(RowSpan, ColSpan)
    • Columns & Rows
    • Columns: Template
    • Columns: Dynamic Template
    • Columns: Components Template
    • Columns: CRUD
    • Rows: CRUD
    • Columns: Sticky
    • Columns: Checkbox
    • Context Menu
    • Row Headers
    • Row Details
    • Nested Grids
    • Freeze Column
    • Freeze Last Column
    • Freeze First & Last Column
    • Freeze Rows
    • Freeze Far Rows
    • Freeze First & Last Row
    • Freeze Rows & Columns
    • Large Data Set
    • Columns & Rows Resize
    • Columns: Resize
    • Row Resize
    • Columns: Dynamic Width
    • Editing
    • Cells Editing
    • Batch Editing
    • Row Editing
    • Dialog Editing
    • Add New Row
    • Add New Row with Auto Insert
    • Auto Complete Cell Editor
    • Auto Complete Dropdown Editor
    • DatetimePicker Editor
    • Textarea Editor
    • Custom Editor
    • Command Column
    • Command Column Position
    • Command Column Labels
    • Command Column Inline
    • Custom Command Column
    • Selection
    • Selection: Rows
    • Selection: Cells
    • Selection: Checkbox
    • Selection: Checkbox Config
    • Live Updates
    • Live Updates (1s)
    • Live Updates Performance (50ms)
    • Live Updates Performance (10ms)
    • Pagination
    • Pagination
    • Pagination: Options
    • Virtual Pagination
    • Virtual Paging, Filtering, Sorting
    • Paging Spinner
    • Grouping
    • Grouping
    • Grouping: Styling
    • Filter
    • Filtering
    • Sort
    • Sort by One Column
    • Sort by Many Columns
    • Sort Animation
    • Custom Sort Icons
    • Scrolling
    • Scroll: Infinite
    • Scroll: Deferred
    • Scroll: Virtual
    • Scroll: Virtual with Immediate Fetch
    • Scroll: Virtual with Sorting and Filtering
    • Scroll: CellValue Callback
    • Using with Angular

    • LED

    • Overview
    • Input Group
    • Input Group with Custom Elements

    • ListBox

    • Overview
    • Basic
    • Checkboxes
    • Custom Filtering
    • Custom Elements in Items
    • Editable Items
    • Filter
    • Grouping
    • Images
    • Item Template
    • Lazy Loading
    • Methods
    • Radio Buttons
    • Reorder
    • Multiple Selection
    • Virtualization
    • Using with Angular

    • ListMenu

    • Overview
    • Basic
    • Data Source
    • Filterable
    • Grouped
    • Lazy Loading
    • Using with Angular

    • MaskedTextBox

    • Overview
    • Basic
    • Cut, Copy & Paste
    • Hide Prompt char on Blur
    • Overwrite Mode
    • Prompt char
    • Validation
    • Using with Angular

    • Menu

    • Overview
    • Add & Remove Items
    • Basic
    • Checkboxes
    • Context Menu
    • Data Source
    • Dropdown Position
    • Hidden Scroll Buttons
    • Items Layout
    • Items with Icons
    • Load from UL
    • Selection Mode
    • Tree Mode
    • Vertical Mode
    • Using with Angular

    • MultiSplitButton

    • Overview
    • Basic
    • Button Group
    • Button Position
    • Checkboxes
    • Events
    • Using with Angular

    • MultilineTextBox

    • Overview
    • Basic
    • Display Mode
    • Enter Key Behavior
    • Resizable
    • Scrollbars
    • Using with Angular

    • NumericTextBox

    • Overview
    • Basic
    • Complex Numbers
    • Floating-Point Numbers
    • Integer Numbers
    • Localization
    • Scientific Notation Numbers
    • Styling
    • Using with Angular

    • Pager

    • Overview
    • Basic
    • Events
    • Localization
    • Page Size Selector
    • Using with Angular

    • PasswordTextBox

    • Overview
    • Basic
    • Custom Password Strength
    • Events
    • Password Icon
    • Strength
    • Localization
    • Strength Template
    • Using with Angular

    • PowerButton

    • Overview

    • ProgressBar

    • Overview
    • Barber Shop Style
    • Basic
    • Amazon Echo Style
    • Events
    • Methods
    • Nested Button
    • Using with Angular

    • Query Builder

    • Overview
    • Custom Operations
    • Value
    • Using with Angular

    • RadioButton

    • Overview
    • Basic
    • Events
    • Images
    • Using with Angular

    • RepeatButton

    • Overview

    • ScrollBar

    • Overview
    • Using with Angular

    • Slider

    • Overview
    • Basic
    • Buttons
    • Click Coordinates
    • Coercion
    • Custom Interval
    • Date Scale
    • Integer Scale
    • Labels
    • Logarithmic Scale
    • Mechanical Action
    • Range Selection
    • Ticks On Track
    • Tooltip
    • Using with Angular

    • Splitter

    • Overview
    • Auto Sizing
    • Expand / Collapse
    • Events
    • Live Resize
    • Locked Items
    • Methods
    • Min / Max Item Size
    • Nested Splitters
    • Orientation
    • Resize Modes
    • Resize With Window
    • Using with Angular

    • Sortable

    • Overview
    • List
    • Vertical Puzzle
    • Horizontal Puzzle
    • Using with Angular

    • SwitchButton

    • Overview
    • Using with Angular

    • Table

    • Overview
    • Table Bordered
    • Table Dark Bordered
    • Table CRUD
    • Sort
    • Sort by Many Columns
    • Dark Table
    • Dark Head
    • Hover
    • Primary Head
    • Striped
    • Responsive Table
    • Using with Angular

    • Tabs

    • Overview
    • Auto Height
    • Badges
    • Basic
    • Close Buttons
    • Data Source
    • Grouping
    • Hidden Scroll Buttons
    • Insert, Remove, Update
    • Integration
    • Label Settings
    • Layout
    • Position
    • Reorder
    • Selection Mode
    • Styling
    • Title Template
    • Using with Angular

    • Tank

    • Overview
    • Basic
    • Coercion
    • Custom Interval
    • Date Scale
    • Labels
    • Layout
    • Logarithmic Scale
    • Mechanical Action
    • Resizing on Label Change
    • Scientific Notation
    • Settings
    • Label Colors
    • Ticks On Track
    • Tooltip
    • Using with Angular

    • TextBox

    • Overview
    • Auto Complete
    • Basic
    • Data Source Callback
    • Display Mode
    • Events
    • Using with Angular

    • TimePicker

    • Overview
    • 24-hour Format
    • Auto Switch to Minutes
    • Basic
    • Footer
    • Landscape View
    • Settings
    • Using with Angular

    • Toast

    • Overview
    • Auto Close
    • Basic
    • Blink
    • Custom Container
    • Custom Icon
    • Events
    • Item Template
    • Modal
    • Settings
    • Using with Angular

    • ToggleButton

    • Overview
    • Using with Angular

    • Tooltip

    • Overview
    • Absolute Position
    • Basic
    • Custom Arrow Position
    • Events
    • On Progress Bar
    • Using with Angular

    • Tree

    • Overview
    • Add / Remove Items
    • Connecting Lines
    • Custom Toggle Element
    • Data Source
    • Drag & Drop
    • Editable Labels
    • Filtering
    • Hierarchical Checkboxes
    • Item Template
    • Load on Demand
    • Move up/down
    • Scroll Modes
    • Selection Modes
    • Selection Display Modes
    • Sorting
    • State Maintenance
    • Using with Angular

    • Validator

    • Overview
    • Base Inputs

    • Window

    • Overview
    • Basic
    • Custom Header Buttons
    • Events
    • Header Buttons
    • Header/Footer Template
    • Header Position
    • Inside Container
    • Methods
    • Minimization
    • Modal
    • Multiple Windows
    • Resizing
    • Snap Mode
    • Tabs
    • Window Types
    • Wait Window
    • Using with Angular

Smart is Framework for building user interfaces

Theme

Smart Framework Web Component Form-dropdownlist-multiple-binding Demo

Source

Custom Elements Angular
index.js
index.htm
styles.css
app.component.ts
app.component.html
app.component.css
window.onload = function() {
	const app = new Smart.App(
		{
			data: {
				selected: ['A']
			}
		}
	)				
}

			
window.onload = function() {
	const app = new Smart.App(
		{
			data: {
				selected: ['A']
			}
		}
	)				
}
		

	
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DropDownList Web Component data binding to Array and Smart-MODEL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/common.css" />		
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
  	<script src="../../source/smart.elements.js"></script>
	<script src="index.js"></script>	
</head>
<body class="viewport">
	<div class="demo-description">
	DropDownList (bound to Array)
	</div>
	<br/>
	 <smart-drop-down-list selection-mode="checkBox" smart-model="selected">
		<smart-list-item value="A">A</smart-list-item>
		<smart-list-item value="B">B</smart-list-item>
		<smart-list-item value="C">C</smart-list-item>
	</smart-drop-down-list>
	<br/>
	<br/>
	Selected: <span>{{ selected }}</span>
</body>
</html>

	
		
					

	

	


Edit in CodePen


	

			

    






  

	

	

	  

		
Documentation & Learning Resources

		
    
		  
  • Getting Started
    • 
		  
  • CSS Styling and Appearance
    • 
		  
  • API Documentation
    • 
		

	  

	  
	

  













    

      

        
    
          
  • Demo
    • 
          
  • Download
    • 
          
  • Docs
    • 
          
  • License
    • 
          
  • Services
    • 
        

        
    
          
  • Forums
    • 
          
  • About
    • 
          
  • Terms of Use
    • 
          
  • Privacy Policy
    • 
          
  • Contact Us
    • 
        

      

      

        
    
          
    • 
          
    • 
		      
    • 
        

      

      

        

          
		  
Smart HTML Elements by jQWidgets © 2018-2019. All Rights Reserved.