Glitch manually programming a drill down | XM Community
Solved

Glitch manually programming a drill down

  • 21 February 2024
  • 3 replies
  • 64 views

Userlevel 7
Badge +38

I started a survey last year not realizing that when you reload a drilldown question with an edited list, it will RECODE all of your values. I have about 60 program specific reports that I am basing off of the value of these codes. Since I plan to use this program monthly for a few years I accepted just updating the filters but unexpectedly I have more changes to the drilldown. To avoid hours of redoing saved filter I am trying to hard code the drill down. I am having decent success but when I click the next button my program name and program number get wiped out of the input. If you can provide any help with how to prevent that from happening I’d appreciate it.

 

Otherwise I have a work around where I save the program number in the Embedded data and base my filters on Embedded data instead of Question data. That is okay but it takes some working and fingers crossing to get this set up BEFORE having data that chose a particular program number - a requirement as I am showing people their cumulative responses live through an advanced report.

 

I am not the strongest programmer and this is definitely brute force programmed. Some providers have multiple programs but each program will only have one program number.

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function() {
/*Place your JavaScript here to run when the page is fully displayed*/
var that = this.questionId;

//Add options that should be in the drop down list s1 = first in the list, s2 = second in the list, sn = nth in the list...
var element = (
"<select id='s1'><option ></option><option value='1'>Anesis Center for Marriage and Family Therapy LLC</option><option value='2'>Bayview Foundation Inc</option>" +
"<option value='3'>Big Brothers and Big Sisters of Dane County Inc</option><option value = '4'>Cambridge Community Activities Program</option>" +
"<option value='5'>Catholic Multicultural Center</option><option value='6'>Centro Hispano</option>" +
"<option value='7'>CEOs of Tomorrow Inc</option><option value='8'>Chlildren's Service Society of WI</option>" +
"<option value='9'>City of Fitchburg</option><option value='10'>City of Middleton</option>" +
"<option value='11'>City of Stoughton</option><option value='12'>City of Sun Prairie</option>" +
"<option value='13'>DCDHS - Adult Protective Services</option><option value='14'>Deerfield Community Center</option>" +
"<option value='15'>Domestic Abuse Intervention Services</option><option value='16'>Families Back To The Table Inc</option>" +
"<option value='17'>Family Service Madison</option><option value='18'>Goodman Community Center, Inc.</option>" +
"<option value='19'>Jewish Social Services of Madison Inc</option><option value='20'>Lussier Community Education Center</option>" +
"<option value='21'>Lutheran Social Services</option><option value='22'>Madison Metropolitan School District</option>" +
"<option value='37'>Madison Reading Project</option><option value='23'>McFarland Youth Center, Inc.</option><option value='24'>Mount Zion Batist Church</option>" +
"<option value='25'>Oregon Youth Center Inc</option><option value='26'>Outreach</option>" +
"<option value='27'>Planned Parenthood of WI</option><option value='28'>Porchligth Inc</option>" +
"<option value='29'>Rape Crisis Center</option><option value='30'>Today Not Tomorrow</option>" +
"<option value='31'>United Way of Dane County</option><option value='32'>Urban League of Greater Madison</option>" +
"<option value='33'>Vivent Health, Inc. fka Aids Resource Center of WI</option><option value='34'>Wisconsin Youth Company, Inc.</option>" +
"<option value='35'>YWCA Madison Inc</option><option value='36'>Test Provider</option></select>"
);
var element2 = "<select id='s2'><option ></option></select>";
var element3 = "<select id='s3'><option ></option></select>";
//show select list after row number _ label
jQuery(element).insertAfter("#" + that + " .InputText:eq(0)");
jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");

//hide input fields
jQuery("#" + that + " .InputText:eq(0)").hide();
jQuery("#" + that + " .InputText:eq(1)").hide();
jQuery("#" + that + " .InputText:eq(2)").hide();

//upon first selection, display the text value and not the code
jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

jQuery("#s1").on('change', function() {
jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
var provider = jQuery("#" + that + " .InputText:eq(0)").val();
console.log("provider "+provider);
//If provider is Anesis
if(provider == 'Anesis Center for Marriage and Family Therapy LLC') {
var element2 = "<select id='s2'><option</option><option value='1'>Outreach</option></select>";
var element3 = "<select id='s3'><option</option><option value='13366'>13366</option></select>";
}

//If provider is Bayview
if(provider == 'Bayview Foundation Inc') {
var element2 = "<select id='s2'><option</option><option value='2'>Behavioral Health Support & Referral</option></select>";
var element3 = "<select id='s3'><option</option><option value='13339'>13339</option></select>";
}

//If provider is Big Brother Big Sister
if(provider == 'Big Brothers and Big Sisters of Dane County Inc') {
var element2 = "<select id='s2'><option</option><option value='3'>Youth Mentoring Services</option></select>";
var element3 = "<select id='s3'><option</option><option value='13380'>13380</option></select>";
}

//If provider is Cambridge Community
if(provider == 'Cambridge Community Activities Program') {
var element2 = "<select id='s2'><option</option><option value='4'>Cambridge Youth Resource Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='4609'>4609</option></select>";
}

//If provider is Catholic Multicultural
if(provider == 'Catholic Multicultural Center') {
var element2 = "<select id='s2'><option </option><option value='5'>Afhan Refugee Assistance</option><option value='6'>Immigration Services</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Centro
if(provider == 'Centro Hispano') {
var element2 = "<select id='s2'><option </option><option value='7'>Accredited Representative</option><option value='8'>Community Engagement</option>" +
"<option value='9'>Immigration Assistance</option><option value='10'>Juventud/Escalera</option><option value='11'>Pro Se Clinics</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is CEOs of Tomorrow
if(provider == 'CEOs of Tomorrow Inc') {
var element2 = "<select id='s2'><option</option><option value='12'>YJIG - Social Entreprenuership</option></select>";
var element3 = "<select id='s3'><option</option><option value='12654'>12654</option></select>";
}

//If provider is Children's Service
if(provider == "Chlildren's Service Society of WI") {
var element2 = "<select id='s2'><option </option><option value='13'>Empl & Education Specialist - Allied</option><option value='14'>Empl & Education Specialist - Leopold</option>" +
"<option value='15'>Empl & Education Specialist - Northside</option><option value='16'>Empl & Education Specialist - Russett</option><option value='17'>Empl & Education Specialist - Sun Prairie</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Fitchburg
if(provider == 'City of Fitchburg') {
var element2 = "<select id='s2'><option</option><option value='18'>Neighborhood Navigators</option></select>";
var element3 = "<select id='s3'><option</option><option value='12599'>12599</option></select>";
}

//If provider is Middleton
if(provider == 'City of Middleton') {
var element2 = "<select id='s2'><option</option><option value='19'>Middleton Youth Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='10553'>10553</option></select>";
}

//If provider is Stoughton
if(provider == 'City of Stoughton') {
var element2 = "<select id='s2'><option</option><option value='19'>Stoughton YRC</option></select>";
var element3 = "<select id='s3'><option</option><option value='4458'>4458</option></select>";
}

//If provider is Sun Prairie
if(provider == 'City of Sun Prairie') {
var element2 = "<select id='s2'><option </option><option value='21'>Neighborhood Navigators</option><option value='22'>Youth Mentorship Program</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is DCDHS - APS
if(provider == 'DCDHS - Adult Protective Services') {
var element2 = "<select id='s2'><option </option><option value='23'>Elders at Risk (18-59)</option><option value='24'>Elders at Risk (60+)</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Deerfield
if(provider == 'Deerfield Community Center') {
var element2 = "<select id='s2'><option </option><option value='25'>Behavioral Health Support & Referral</option><option value='26'>Deerfield Youth Center</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is DIAS
if(provider == 'Domestic Abuse Intervention Services') {
var element2 = "<select id='s2'><option </option><option value='27'>Crisis Case Management</option>" +
"<option value='28'>Crisis Intervention</option><option value='29'>Legal Services</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}
//If provider is Families Back
if(provider == 'Families Back To The Table Inc') {
var element2 = "<select id='s2'><option</option><option value='30'>Family Engagement</option></select>";
var element3 = "<select id='s3'><option</option><option value='13712'>13712</option></select>";
}
//If provider is Family Service Madison
if(provider == 'Family Service Madison') {
var element2 = "<select id='s2'><option </option><option value='31'>AODA Prevention</option>" +
"<option value='32'>Community Mobilization</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Goodman
if(provider == 'Goodman Community Center, Inc.') {
var element2 = "<select id='s2'><option </option><option value='33'>Basketball & Recreation Services</option>" +
"<option value='32'>Goodman Youth Resource Center</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is JSS
if(provider == 'Jewish Social Services of Madison Inc') {
var element2 = "<select id='s2'><option </option><option value='35'>Afghan Refugee Assistance</option>" +
"<option value='36'>Immigration Services</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Lussier
if(provider == 'Lussier Community Education Center') {
var element2 = "<select id='s2'><option</option><option value='37'>Youth Resource Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='1953'>1953</option></select>";
}

//If provider is LSS
if(provider == 'Lutheran Social Services') {
var element2 = "<select id='s2'><option</option><option value='38'>Off The Square Club</option></select>";
var element3 = "<select id='s3'><option</option><option value='1320'>1320</option></select>";
}

//If provider is MMSD
if(provider == 'Madison Metropolitan School District') {
var element2 = "<select id='s2'><option</option><option value='39'>Youth Resource Centers</option></select>";
var element3 = "<select id='s3'><option</option><option value='1896'>1896</option></select>";
}

//If provider is Madison Reading Project
if(provider == 'Madison Reading Project') {
var element2 = "<select id='s2'><option</option><option value='59'>My First Pages</option></select>";
var element3 = "<select id='s3'><option</option><option value='14474'>14474</option></select>";
}

//If provider is McFarland YC
if(provider == 'McFarland Youth Center, Inc.') {
var element2 = "<select id='s2'><option</option><option value='40'>Youth Resource Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='14474'>14474</option></select>";
}

//If provider is Mt Zion Baptist
if(provider == 'Mount Zion Batist Church') {
var element2 = "<select id='s2'><option</option><option value='41'>Mentoring & Prevention Pilot Program</option></select>";
var element3 = "<select id='s3'><option</option><option value='13414'>13414</option></select>";
}

//If provider is Oregon YC
if(provider == 'Oregon Youth Center Inc') {
var element2 = "<select id='s2'><option</option><option value='42'>Oregon Youth Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='11169'>11169</option></select>";
}

//If provider is Outreach
if(provider == 'Outreach') {
var element2 = "<select id='s2'><option </option><option value='43'>Information/Referral</option>" +
"<option value='44'>Outreach</option><option value='45'>Senior LGBT Outreach</option>" +
"<option value='46'>Transgender Health Advocate</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}

//If provider is Planned Parenthood
if(provider == 'Planned Parenthood of WI') {
var element2 = "<select id='s2'><option</option><option value='47'>Family Planning</option></select>";
var element3 = "<select id='s3'><option</option><option value='4415'>4415</option></select>";
}

//If provider is Porchlight
if(provider == 'Porchligth Inc') {
var element2 = "<select id='s2'><option</option><option value='48'>Safehaven - Outreach</option></select>";
var element3 = "<select id='s3'><option</option><option value='13358'>13358</option></select>";
}

//If provider is RCC
if(provider == 'Rape Crisis Center') {
var element2 = "<select id='s2'><option </option><option value='49'>Crisis Intervention</option>" +
"<option value='50'>Sexual Assault Prevention Services</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}


//If provider is Today Not Tomorrow
if(provider == 'Today Not Tomorrow') {
var element2 = "<select id='s2'><option</option><option value='51'>Family Resource Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='12519'>12519</option></select>";
}


//If provider is Unitedway
if(provider == 'United Way of Dane County') {
var element2 = "<select id='s2'><option</option><option value='52'>Sun Prairie ECZ Housing Assistance</option></select>";
var element3 = "<select id='s3'><option</option><option value='13569'>13569</option></select>";
}

//If provider is Urban League
if(provider == 'Urban League of Greater Madison') {
var element2 = "<select id='s2'><option</option><option value='53'>21st Century Careers</option></select>";
var element3 = "<select id='s3'><option</option><option value='4590'>4590</option></select>";
}

//If provider is Vivent
if(provider == 'Vivent Health, Inc. fka Aids Resource Center of WI') {
var element2 = "<select id='s2'><option</option><option value='54'>Intake and Needle Exchange</option></select>";
var element3 = "<select id='s3'><option</option><option value='13358'>13358</option></select>";
}

//If provider is WI Youth Co
if(provider == 'Wisconsin Youth Company, Inc.') {
var element2 = "<select id='s2'><option</option><option value='55'>Wisconsin Youth & Family Center</option></select>";
var element3 = "<select id='s3'><option</option><option value='4507'>4507</option></select>";
}

//If provider is YWCA
if(provider == 'YWCA Madison Inc') {
var element2 = "<select id='s2'><option</option><option value='56'>M. School Restorative Justice</option></select>";
var element3 = "<select id='s3'><option</option><option value='10935'>10935</option></select>";
}

//If provider is Test Provider
if(provider == 'Test Provider') {
var element2 = "<select id='s2'><option </option><option value='57'>Betsy</option>" +
"<option value='58'>Michele</option></select>";
var element3 = "<select id='s3'><option </option></select>";
}


jQuery("#s2").hide();
jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());

jQuery("#s3").hide();
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
var program = jQuery("#" + that + " .InputText:eq(1)").val();

jQuery("#s2").on('change', function() {
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
var program = jQuery("#" + that + " .InputText:eq(1)").val();
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

///////////// Catholic Multicultural Center //////////////////
//If program is Afhan Refugee
if(provider=='Catholic Multicultural Center' && program == 'Afhan Refugee Assistance') {
var element3 = "<select id='s3'><option</option><option value='13557'>13557</option></select>";
}
//If program is Immigration
if(provider=='Catholic Multicultural Center' && program == 'Immigration Services') {
var element3 = "<select id='s3'><option</option><option value='13151'>13151</option></select>";
}

///////////// CENTRO HISPANO //////////////////////
//If program is Accred Rep
if(provider=='Centro Hispano' && program == 'Accredited Representative') {
var element3 = "<select id='s3'><option</option><option value='12712'>12712</option></select>";
}
//If program is Comm Engage
if(provider=='Centro Hispano' && program == 'Community Engagement') {
var element3 = "<select id='s3'><option</option><option value='11969'>11969</option></select>";
}
//If program is Immigration Assistance
if(provider=='Centro Hispano' && program == 'Immigration Assistance') {
var element3 = "<select id='s3'><option</option><option value='13120'>13120</option></select>";
}
//If program is Juventud/Escalera
if(provider=='Centro Hispano' && program == 'Juventud/Escalera') {
var element3 = "<select id='s3'><option</option><option value='1490'>1490</option></select>";
}
//If program is Pro Se Clinic
if(provider=='Centro Hispano' && program == 'Pro Se Clinics') {
var element3 = "<select id='s3'><option</option><option value='13602'>13602</option></select>";
}

///////////// Chlildren's Sevice //////////////////////
//If program is Allied
if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Allied') {
var element3 = "<select id='s3'><option</option><option value='4559'>4559</option></select>";
}
//If program is Leopold
if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Leopold') {
var element3 = "<select id='s3'><option</option><option value='12639'>12639</option></select>";
}
//If program is Northside
if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Northside') {
var element3 = "<select id='s3'><option</option><option value='12640'>12640</option></select>";
}
//If program is Russett
if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Russett') {
var element3 = "<select id='s3'><option</option><option value='12642'>12642</option></select>";
}
//If program is Sun Prairie
if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Sun Prairie') {
var element3 = "<select id='s3'><option</option><option value='12641'>12641</option></select>";
}

///////////// CITY OF SUN PRAIRIE //////////////////
//If program is Navigators
if(provider=='City of Sun Prairie' && program == 'Neighborhood Navigators') {
var element3 = "<select id='s3'><option</option><option value='12600'>12600</option></select>";
}
//If program is Youth Mentorship
if(provider=='City of Sun Prairie' && program == 'Youth Mentorship Program') {
var element3 = "<select id='s3'><option</option><option value='13310'>13310</option></select>";
}

///////////// DCDHS - APS //////////////////
//If program is 18-59
if(provider=='DCDHS - Adult Protective Services' && program == 'Elders at Risk (18-59)') {
var element3 = "<select id='s3'><option</option><option value='12919'>12919</option></select>";
}
//If program is 60+
if(provider=='DCDHS - Adult Protective Services' && program == 'Elders at Risk (60+)') {
var element3 = "<select id='s3'><option</option><option value='12918'>12918</option></select>";
}

///////////// DEERFIELD //////////////////
//If program is Behavioral Health
if(provider=='Deerfield Community Center' && program == 'Behavioral Health Support & Referral') {
var element3 = "<select id='s3'><option</option><option value='13338'>13338</option></select>";
}
//If program is Youth Center
if(provider=='Deerfield Community Center' && program == 'Deerfield Youth Center') {
var element3 = "<select id='s3'><option</option><option value='12880'>12880</option></select>";
}

///////////// DIAS //////////////////
//If program is Crisis Case Management
if(provider=='Domestic Abuse Intervention Services' && program == 'Crisis Case Management') {
var element3 = "<select id='s3'><option</option><option value='13726'>13726</option></select>";
}
//If program is Crisis Intervention
if(provider=='Domestic Abuse Intervention Services' && program == 'Crisis Intervention') {
var element3 = "<select id='s3'><option</option><option value='13724'>13724</option></select>";
}
//If program is Legal Services
if(provider=='Domestic Abuse Intervention Services' && program == 'Legal Services') {
var element3 = "<select id='s3'><option</option><option value='13725'>13725</option></select>";
}

///////////// FAMILY SERVICE MADISON //////////////////
//If program is AODA
if(provider=='Family Service Madison' && program == 'AODA Prevention') {
var element3 = "<select id='s3'><option</option><option value='13737'>13737</option></select>";
}
//If program is Community Mobilization
if(provider=='Family Service Madison' && program == 'Community Mobilization') {
var element3 = "<select id='s3'><option</option><option value='13738'>13738</option></select>";
}

//////////// GOODMAN //////////////////
//If program is Basketball
if(provider=='Goodman Community Center, Inc.' && program == 'Basketball & Recreation Services') {
var element3 = "<select id='s3'><option</option><option value='13112'>13112</option></select>";
}
//If program is Youth Center
if(provider=='Goodman Community Center, Inc.' && program == 'Goodman Youth Resource Center') {
var element3 = "<select id='s3'><option</option><option value='4397'>4397</option></select>";
}

//////////// JSS //////////////////
//If program is Afghan Refugees
if(provider=='Jewish Social Services of Madison Inc' && program == 'Afghan Refugee Assistance') {
var element3 = "<select id='s3'><option</option><option value='13112'>13112</option></select>";
}
//If program is Immigration
if(provider=='Jewish Social Services of Madison Inc' && program == 'Immigration Services') {
var element3 = "<select id='s3'><option</option><option value='4397'>4397</option></select>";
}

//////////// OUTREACH //////////////////
//If program is Info/Referral
if(provider=='Outreach' && program == 'Information/Referral') {
var element3 = "<select id='s3'><option</option><option value='13720'>13720</option></select>";
}
//If program is Outreach
if(provider=='Outreach' && program == 'Outreach') {
var element3 = "<select id='s3'><option</option><option value='13719'>13719</option></select>";
}
//If program is Senior LGBT
if(provider=='Outreach' && program == 'Senior LGBT Outreach') {
var element3 = "<select id='s3'><option</option><option value='11036'>11036</option></select>";
}
//If program is Transgender
if(provider=='Outreach' && program == 'Transgender Health Advocate') {
var element3 = "<select id='s3'><option</option><option value='12738'>12738</option></select>";
}

///////////// RCC //////////////////
//If program is Crisis Intervention
if(provider=='Rape Crisis Center' && program == 'Crisis Intervention') {
var element3 = "<select id='s3'><option</option><option value='1283'>1283</option></select>";
}
//If program is Sexual Assault
if(provider=='Rape Crisis Center' && program == 'Sexual Assault Prevention Services') {
var element3 = "<select id='s3'><option</option><option value='12548'>12548</option></select>";
}

///////////// TEST PROVIDER //////////////////
//If program is Betsy
if(provider=='Test Provider' && program == 'Betsy') {
var element3 = "<select id='s3'><option</option><option value='99999'>99999</option></select>";
}
//If program is Michele
if(provider=='Test Provider' && program == 'Michele') {
var element3 = "<select id='s3'><option</option><option value='99998'>99998</option></select>";
}

jQuery("#s3").hide();
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());


});

var prgmnum = jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
Qualtrics.SurveyEngine.setEmbeddedData("ProgramNo", prgmnum);
Qualtrics.SurveyEngine.setEmbeddedData("Program",program);
Qualtrics.SurveyEngine.setEmbeddedData("Provider",provider);
console.log("outter: program ", program, " provider ", provider, " program number ",prgmnum);
});






});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

 

icon

Best answer by bstrahin 22 February 2024, 17:14

View original

3 replies

Userlevel 7
Badge +21

I’m sorry, I wasn’t able to go through your code as it was too long and without a reference of what I was working it, would take too much time to parse.

However, if your only issue is recode values, why don’t you add them as an additional column and then use JS to autoselect that option.

You’ll then have access to this column in your answers similar to the recode value.

For example:

I added a 4th column (let’s call it recode) to the Qualtrics drill down sample:

 

 

And use the following JS to autoselect the 4th row:

 

Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.questionContainer;
const allSelects = qc.querySelectorAll("select");
const numSelects = allSelects.length;

const lastSelect = allSelects[numSelects - 1];
const secondLastSelect = allSelects[numSelects - 2];

secondLastSelect.onchange = function () {
setTimeout(() => {
lastSelect.options[1].selected = true;
}, 50);
};

// Disabling User Interaction with the select box
lastSelect.disabled = true;
lastSelect.style.pointerEvents = "none";
lastSelect.style.cursor = "not-allowed";

// Removing the Drop down arrow
lastSelect.style.appearance = "none";
lastSelect.style.border = "none";

// Hiding the recode row
// const parents = lastSelect.ancestors();
// for (let i = 0; i < parents.length; i++) {
// const el = parents[i];
// console.log(i, el);
// if (el.tagName == "TR") {
// el.style.opacity = 0;
// break;
// }
// }
});

 

Here’s the demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_8ANz75Ksul37md0?Q_SurveyVersionID=current

 

Userlevel 7
Badge +27

@bstrahin,

I’ve used select2 with a form question to create custom drill-downs a number of times, and I would recommend this approach if you need the flexibility of a custom drill-down.  The advantages are:

  1. The data (i.e., select options) can come from an array of objects or ajax.  If your case, arrays of objects would work and would be much easier to maintain than unwieldy html strings.
  2. The selects can be attached directly to text input fields in your form.
  3. The selects are searchable
  4. The data can contain additional fields that can be saved into additional form fields (typically hidden)
Userlevel 7
Badge +38

Thank you @TomG and @ahmedA. Your guidance sent me digging and I found a few tweaks to make my code work. Some playing around and changing the functions from on(‘change’,function() to on(‘click’,function() made a big difference. I am posting a shorter example for anyone who needs to replicate.

 

Qualtrics.SurveyEngine.addOnReady(function(){
/*Place your JavaScript here to run when the page is fully displayed */
var that = this.questionId;

//Add options that should be in the dropdown list
//s1 = first field in the drill down (Internet Provider)
//s2 = second list in the drill down (Plan)
//s3 = third list in the drill down (Price -- totally made up)

//Full list we are working from
//Spectrum Plan A 25
//Spectrum Plan B 40
//Charter Plan A 80
//AT&T Plan A 35
//AT&T Plan B 45
//AT&T Plan C 70
//TDS Plan A 90

//Create S1 list: Spectrum, Charter, AT&T, TDS
var element = (
//blank first option
"<select id='s1'><option></option><option value='1'>Spectrum</option>" +
"<option value='2'>Charter</option><option value='3'>AT&T</option>" +
"<option value='4'>TDS</option></select>"
);

//Assign blank drop downs for rows 2 and 3
var element2 = "<select id='s2'><option></option></select>";
var element3 = "<select id='s3'><option></option></select>";

jQuery(element).insertAfter("#" + that + " .InputText:eq(0)");
jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");

//hide regular text input fields
jQuery("#" + that + " .InputText:eq(0)").hide();
jQuery("#" + that + " .InputText:eq(1)").hide();
jQuery("#" + that + " .InputText:eq(2)").hide();

//upon selection, display the text value
jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s3 option:selected").text());

//when a change is made to s1 (first row of entry)
jQuery("#s1").on('click',function(){
//look up value in that box, store it variable provider, and display in the console
jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
var provider = jQuery("#" + that + " .InputText:eq(0)").val();

//for providers with just 1 plan and price combo...
//do NOT program a blank option at the start of the lists
//If provider is Charter
if(provider == 'Charter'){
var element2 = "<select id='s2'><option value='3'>Plan A</option></select>";
var element3 = "<select id='s3'><option value='3'>80</option></select>";
}
//If provider is TDS
if(provider=='TDS'){
var element2 = "<select id='s2'><option value='7'>Plan A</option></select>";
var element3 = "<select id='s3'><option value='7'>90</option></select>";
}

//for providers with multiple plans
//Spectrum
if(provider=='Spectrum'){
var element2 = "<select id='s2'><option></option><option value='1'>Plan A</option><option value='2'>Plan B</option></select>";
var element3 = "<select id='s3'><option></option></select>";
}
//AT&T
if(provider=='AT&T'){
var element2 = "<select id='s2'><option></option><option value='4'>Plan A</option><option value='5'>Plan B</option><option value='6'>Plan C</option></select>";
var element3 = "<select id='s3'><option></option></select>";
}

//autoselect these values and click on them to have them save
jQuery("#s2").hide(); //hides original blank list you inserted
jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)"); //inserts list defined above and simulates a click
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text()); //displays text that goes with the value

jQuery("#s3").hide();
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

//for providers with multiple plans
jQuery("#s2").on('click', function(){
jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
var plan=jQuery("#" + that + " .InputText:eq(1)").val();

jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
var price=jQuery("#" + that + " .InputText:eq(2)").val();

//If provider is Spectrum
//Plan A
if(provider == 'Spectrum' && plan == 'Plan A'){
var element3 = "<select id='s3'><option value='1'>25</option></select>";
}
//Plan B
if(provider == 'Spectrum' && plan == 'Plan B'){
var element3 = "<select id='s3'><option value='2'>40</option></select>";
}

//If provider is AT&T
//Plan A
if(provider == 'AT&T' && plan == 'Plan A'){
var element3 = "<select id='s3'><option value='4'>35</option></select>";
}
//Plan B
if(provider == 'AT&T' && plan == 'Plan B'){
var element3 = "<select id='s3'><option value='5'>45</option></select>";
}
//Plan C
if(provider == 'AT&T' && plan == 'Plan C'){
var element3 = "<select id='s3'><option value='6'>70</option></select>";
}

jQuery("#s3").hide();
jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

});

});

});

 

Leave a Reply