-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Dropdown
A drop-down menu allows respondents to select a single answer from a list of choices. You can use drop-down menus for questions that have multiple options but accept only one answer. This example demonstrates how to create and configure a drop-down question in SurveyJS Form Library. Switch between Angular, React, Knockout, jQuery, and Vue to view a demo version for your JavaScript framework.
Create a Drop-Down Menu Question
To create a drop-down menu form field, define an object with the type
property set to "dropdown"
and add it to the elements
array. Use the choices
array to specify choice values. Each object in this array should have the following structure:
{
"value": any, // A unique value to be saved in the survey results.
"text": String // A display text. When `text` is undefined, `value` is used as display text.
}
If you need to specify only the value
property, you can set the choices
property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text.
You can also load choice values from a RESTful web service. In this case, use the choicesByUrl
property instead of the choices
array. Refer to following demo for more information: Load Data from Web Services.
Sort Menu Items
Choices are sorted according to the choices
array. If you want to sort them in ascending or descending alphabetical order, assign "asc"
or "desc"
to the choicesOrder
property. Alternatively, you can set this property to "random"
to sort choices in random order each time your survey is displayed. You can change the sort order at runtime in this demo.
Filter Menu Items
Respondents can search the drop-down list for a required item. To do this, enter a filter string into the input field. If you want to disable this functionality, set the searchEnabled
property to false
.
Display Special Choices
Special choices are the "None" and "Other" options. "None" is used when none of the proposed options suit a respondent; "Other" allows respondents to enter their own option into a comment area.
To display the None and Other options, enable the showNoneItem
and showOtherItem
properties. You can also set the noneText
and otherText
properties to change the captions of the special choices. In this demo, you can show and hide the "Other" option and change its caption at runtime.
When respondents select "Other", the value they enter into the comment area is saved in a separate property. The property name is composed of the question name
and commentSuffix
. For example, if the question name is "car"
, the survey result will be as follows:
{
"car": "other",
"car-Comment": "Custom value"
}
If you want to use the question name as a key to store the comment value, disable the storeOthersAsComment
property in SurveyModel
. In this case, you will get the following survey result:
{
"car": "Custom value"
}
Choice order:
"Other" caption:
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage