Multi-Select Dropdown Box


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "elements": [
    {
      "type": "tagbox",
      "isRequired": true,
      "choicesByUrl": {
        "url": "https://surveyjs.io/api/CountriesExample"
      },
      "name": "countries",
      "title": "Which countries have you visited within the last three years?",
      "description": "Please select all that apply."
    }
  ],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
            
                ko.applyBindings({ model: survey }, document.getElementById("surveyElement"));
            

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Multi-select Tag Box | Knockoutjs Example | SurveyJS</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                    <survey params="survey: model"></survey>
                            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

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.

Create a Tag Box Question

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.

Hide Selected Items

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.

Implement a Custom Item Template

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.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.