Survey.StylesManager.applyTheme("bootstrap");
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
var json = {
"elements": [
{
"type": "dropdown",
"name": "car",
"title": "What car are you driving?",
"isRequired": true,
"colCount": 0,
"hasNone": true,
"choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>One choice - Dropdown question, Vue Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/vue@2.6.14/dist/vue.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-vue-ui/survey-vue-ui.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
<survey :survey='survey' />
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
// The classic way to set the property. The result values are numbers: 1 and 2
choices: [{ value: 1, text: "Value 1" }, { value: 2, text: "Value 2" }]
// The values are: 1 and 'Value 2' and texts are '1' and 'Value 2'
choices: [{ value: 1 }, { value: "Value 2" }]
// The values and texts are same
choices: ["Value 1", "Value 2"]
// The values are '1' and '2' and texts are 'Value 1' and 'Value 2'
choices: ["1|Value 1", "2|Value 2"]
Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.
We'd really appreciate your feedback.
Start the SurveyApproximate time to complete: 2 min.