How to Add Auto-Update Drop down List with Javascript to Question in Qualtrics | XM Community
Skip to main content
Good Morning!



I'm working on application forms for our university and one of the fields is a drop down box that list 5 years (2001, 2002, ...., 2005) that would start from the current year. I would like to avoid having to manually update the drop down each year. I found the JavaScript code but I am not sure how to use it to replace my current "year" option Qualtrics question.



I am not a whiz when it comes to coding and have inserted some basic jQuery/JavaScript that I found that has been extremely helpful but I can't figure this one out .... can someone please advise how to get the following code into my question or please provide me a source?



<script type="text/javascript"><!--

var HowManyListItems = 5; // Specify number of "year" selections.

var year = new Date().getFullYear();

for(var i = 0; i < HowManyListItems; i++)

{

var t = i + year;

document.write('<option value="' + t + '">' + t + '</option>');

}

//--></script>



The code output would be which will change each year thereafter automatically:



2019

2020

2021

2022

2023



Any help you could provide would be greatly appreciated!



Best regards,

Rose
The code did not come through, the JS code is:



<script type="text/javascript"><!--

var HowManyListItems = 5; // Specify number of "year" selections.

var year = new Date().getFullYear();

for(var i = 0; i < HowManyListItems; i++)

{

var t = i + year;

document.write('<option value="' + t + '">' + t + '</option>');

}

//--></script>
@RoseL,



That code isn't going to work with Qualtrics. It has to somehow be attached to an actual Qualtrics input field (a select or text input), and it isn't. Also, that code in meant to be executed in-line inside a `<select>` tag and you can't do that with Qualtrics.



If you make your 'year' question a text input, then you can insert code similar to what you posted that builds a complete `<select>` and inserts it before the text input. Then hide the text input, and use a change event handler on the select to update the text input each time the value changes. Alternatively, you could integrate select2 which does a lot of that for you. There are a number of other select2 related posts on the Community that you can search for.
Great, thank you Tom!

Leave a Reply


Terms & Conditions