Multi-Select Dropdown

Tag Box questions allow respondents to select multiple values from a drop-down list. Selected items are displayed in the input field as removable tags. This example shows how to add a multiple-selection dropdown with a search option to your survey.

To create a Tag Box question, define an object with the type property set to "tagbox" and add it to the elements array. Use the choices array to specify drop-down list items. This array can contain either of the following:

• String values

  "choices": [ "Option 1", "Option 2", "Option 3" ] 
  

• Objects with the text (display value) and value (value to be saved in survey results) properties

  "choices": [{
    "text": "Option 1", 
    "value": 1
  }, {
    "text": "Option 2",
    "value": 2
  }, {
    "text": "Option 3",
    "value": 3
  }] 
  

If you want to load choice values from a RESTful service as shown in this example, use the choicesByUrl property instead. It accepts an object that configures access to the web service. This demo specifies only the service's URL. Refer to the ChoicesRestful object for more information on how to configure the choicesByUrl property.

Respondents can search in the drop-down list to find the item they are looking for. Enter a text string right into the input field to try this functionality. If you want to disable search, assign false to the searchEnabled property.

Selected items are added to the input field as tags. However, they also remain highlighted in the drop-down list. If you want selected items to be removed from the list, enable the hideSelectedItems property. This example demonstrates the default behavior.

If you want to customize drop-down list items, create and apply a custom item template. Since Tag Box shares this functionality with the Dropdown question, refer to the following Dropdown demo for detailed instructions: Dropdown with Custom Item Template.

Conditionally Display Choice Options