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

  • Framework

  • Accordion

  • Badge

  • Button

  • Calendar

  • Card

  • Carousel

  • Chart

  • Checkbox

  • ComboBox

  • DateTimePicker

  • Docking Layout

  • DropDownList

  • Grid

  • Gauge

  • ListBox

  • ListMenu

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • RadioButton

  • RepeatButton

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Table

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Window

  • Framework

  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way 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

  • Badge

  • Overview

  • Button

  • Overview
  • Basic
  • Events
  • Images

  • Card

  • Overview
  • Basic
  • Events

  • Carousel

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

  • 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

  • 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

    • CheckBox

    • Overview
    • Basic
    • Events
    • Images

    • 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

    • DateTimePicker

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

    • 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

    • 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

    • 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

    • Grid

    • Overview
    • Auto Size
    • Alternating Rows
    • Merged Cells(RowSpan, ColSpan)
    • Checkbox Selection
    • Load on Demand
    • Context Menu
    • Grid Lines
    • Tree Grid
    • Tree Grid
    • Tree Grid Nested JSON
    • Tree Grid Large Data
    • Tree Grid Animation
    • Virtual Tree Grid
    • Virtual Tree Grid with Pagination
    • Columns & Rows
    • Columns: Sticky
    • Columns: Template
    • Columns: CRUD
    • Rows: CRUD
    • Columns: Dynamic Width
    • Columns: Resize
    • Columns: Checkbox
    • Row Headers
    • Freeze Column
    • Freeze Last Column
    • Freeze First & Last Column
    • Freeze Rows
    • Freeze Far Rows
    • Freeze First & Last Row
    • Freeze Rows & Columns
    • Large Data Set
    • Editing
    • Cells Editing
    • Batch Editing
    • Row Editing
    • Dialog Editing
    • Add New Row
    • 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
    • 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 Sorting and Filtering

    • LED

    • Overview

    • 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

    • ListMenu

    • Overview
    • Basic
    • Data Source
    • Filterable
    • Grouped
    • Lazy Loading

    • MaskedTextBox

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

    • 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

    • MultiSplitButton

    • Overview
    • Basic
    • Button Group
    • Button Position
    • Checkboxes
    • Events

    • MultilineTextBox

    • Overview
    • Basic
    • Display Mode
    • Enter Key Behavior
    • Resizable
    • Scrollbars

    • NumericTextBox

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

    • Pager

    • Overview
    • Basic
    • Events
    • Localization
    • Page Size Selector

    • PasswordTextBox

    • Overview
    • Basic
    • Custom Password Strength
    • Events
    • Password Icon
    • Strength
    • Localization
    • Strength Template

    • PowerButton

    • Overview

    • ProgressBar

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

    • RadioButton

    • Overview
    • Basic
    • Events
    • Images

    • RepeatButton

    • Overview

    • ScrollBar

    • Overview

    • Slider

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

    • Splitter

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

    • SwitchButton

    • Overview

    • Table

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

    • 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

    • 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

    • TextBox

    • Overview
    • Auto Complete
    • Basic
    • Data Source Callback
    • Display Mode
    • Events

    • TimePicker

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

    • Toast

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

    • ToggleButton

    • Overview

    • Tooltip

    • Overview
    • Absolute Position
    • Basic
    • Custom Arrow Position
    • Events
    • On Progress Bar

    • 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

    • 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

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 © 2018-2019. All Rights Reserved.