You can use select2 for the State and Diocese fields. Change the Diocese choices based on the State selected. Use Dynamic Option Creation (tagging) on the Diocese field to accommodate those outside the USA.



Here is an example of a text form question that uses select2 on two fields. Both are populated from a database using ajax and the second field is dependent on the first. It does NOT use the tagging function that I mentioned.

https://marketinview.ca1.qualtrics.com/jfe/preview/SV_41TwORS85XASG2N?Q_SurveyVersionID=current&Q_CHL=preview

---

@TomG,

Thanks. I'm teaching myself javascript and so select2 is both fascinating and overwhelming. You've led me in the right direction. I'll be able to create a solution from your example and exploring the select2 website carefully.

---

@TomG,

I got some JavaScript to work within a JSFiddle boilerplate (minus the dynamic tagging), but how do I get it into Qualtrics and mapped onto the appropriate lines? Would you mind sending me your .qsf file from your example? Thanks again for your help.

---

@TomG,

Are you referencing text entry form boxes directly and then just overlaying select2 functionality over the text box or are you actually creating dropdown lists within a form and connecting the dropdown lists via some functions and callbacks?



This is the code I have that works in JSFiddle. It utilizes HTML select boxes with dynamic option creation.



Here is it in Qualtrics. Again, I'm not sure how to properly reference a text box within a form when I've created code for dropdowns (html "select" boxes).



Qualtrics.SurveyEngine.addOnReady(function()

{

var qid = jQuery("#QR"+this.questionId);



var stateVar = qid+"-20-text";

var dioceseVar = qid+"-22-text";



var state_arr = new Array("Alabama",..."Wyoming"); // list of states and some territories



var diocese_arr = new Array();

diocese_arr[0] = "";

diocese_arr[1] = "Birmingham|Fairbanks|Mobile"; // Alabama

//... more states and territories

diocese_arr[53] = "Cheyenne"; // Wyoming



function populateDiocese(stateVarElementId, dioceseVarElementId) {

var InputState = document.getElementById(stateVarElementId).selectedIndex;

var dioceseVarElement = document.getElementById(dioceseVarElementId);

dioceseVarElement.length = 0;

dioceseVarElement.options[0] = new Option('Select (Arch)Diocese', '');

dioceseVarElement.selectedIndex = 0;

var diocese = diocese_arr[InputState].split("|");

for (var i = 0; i < diocese.length; i++) {

dioceseVarElement.options[dioceseVarElement.length] = new Option(diocese[i], diocese[i]);

}

}



function populateStates(stateVarElementId, dioceseVarElementId) {

var stateVarElement = document.getElementById(stateVarElementId);

stateVarElement.length = 0;

stateVarElement.options[0] = new Option('Select State', -1);

stateVarElement.selectedIndex = 0;

for (var i = 0; i < state_arr.length; i++) {

stateVarElement.options[stateVarElement.length] = new Option(state_arr[i], state_arr[i]);

}

if(dioceseVarElementId) {

stateVarElement.onchange = function () {

populateDiocese(stateVarElementId, dioceseVarElementId);

};

}

}

populateStates("stateVar", "dioceseVar");

$('#stateVar, #dioceseVar').select2({width: '100%', tags: true});

});



Thanks.

---

> @Ryan_W said:

> @TomG,

> Are you referencing text entry form boxes directly and then just overlaying select2 functionality over the text box or are you actually creating dropdown lists within a form and connecting the dropdown lists via some functions and callbacks?

I'm reference text entry form boxes directly and then just overlaying select2 functionality over the text box. A few things:

1. Make sure you load the full version of select2

2. Use jQuery instead of $ (e.g., jQuery("#stateVar") ).

3. Make greater use of jQuery in general (it will make it easier)

4. Make sure your data is in the correct format for select2 to use. It should be an array with objects for id and text. For example:

```

var states = [

{id: "AL", text: "Alabama"},

...

{id: "WY", text: "Wyoming"}

];

```

Then:

```

jQuery(".InputText").eq(0).select2({

data: states,

placeholder: "State"

});

```

---