Pro Pack
Docs HomeProduct SiteSupport
  • Introduction
  • Installation
  • Chart.js
    • Configuration
    • Data Binding
    • Data Labels
  • Dataset Filter Labels
    • Installation
    • Configuration
    • Data Binding
  • DataTables
    • Configuration
    • Data Binding
    • Events
    • Methods
  • Date Range Picker
    • Configuration
    • Data Binding
    • Methods
  • iCheck
    • List
      • Configuration
      • Data Binding
      • Events
    • Filter
      • Configuration
      • Data Binding
  • Select2
    • Configuration
    • Data Binding
    • Events
    • Methods
  • Sparklines
    • Installation
    • Configuration
    • Data Binding
  • Toastr
    • Configuration
  • Web Frameworks
Powered by GitBook
On this page
  • Properties
  • Datamap

Was this helpful?

  1. Select2

Data Binding

PreviousConfigurationNextEvents

Last updated 3 years ago

Was this helpful?

The for Select2 for WireBootstrap is listed below. The component expects these field names in its data configuration.

Properties

Name

Description

id

The field in the data to be used as the unique id for items

text

The field in the data to be used as the display label for items

const users = [
    { id: "bsimmons", text: "Ben Simmons" },
    { id: "jembiid", text: "Joel Embiid" }
]

const select2 = new wire.select2().render("#select", {
    data: users
});

Datamap

Use the datamap configuration property to bind a data structure to the component that does not have the same field names.

const users = [
    { user: "bsimmons", name: "Ben Simmons" },
    { user: "jembiid", name: "Joel Embiid" },
]

const select2 = new wire.select2().render("#select", {
    data: users,
    datamap: { id: "user", text: "name" }
});

data map