Question

Form Question - Drop Down Formatting

1 year ago
October 20, 2023
11 replies
520 views

parkie_0007
Level 5 ●●●●●
151 replies

Hi Everyone

I found this code to make a form field into a dropdown.

var that=this.questionId;
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
}, false);

Looks like this.

But how do I format the the dropdown to look like the other form fields?

Thanks :)

+29

Nam Nguyen
QPN Level 8 ●●●●●●●●
1091 replies
1 year ago
October 20, 2023

@parkie_0007 Add the class of the text entry box into your element. I’m guessing you’re using classic layout, so you’re code might be like this. Let me know if it works
var element="<select id='s3' class='Medium InputText'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

Nam Nguyen - XM Technology Consultant | DXCON Vietnam

parkie_0007
Author
Level 5 ●●●●●
151 replies
1 year ago
October 20, 2023

Amazing, this worked.

The code for this question is starting to get a little complicated, how would I duplicate what I have in field 1, into field 2?

Qualtrics.SurveyEngine.addOnload(function()
{

});

Qualtrics.SurveyEngine.addOnReady(function()
{

var that=this.questionId;
var pipe3 = this.getTextValue(1);
var element="<select id='s3' class='Medium InputText'><option></option><option value='Entry 1'>140 / Deep Dubstep / Grime</option><option value='Entry 2'>Afro House</option><option value='Entry 3'>Amapiano</option><option value='Entry 4'>Bass / Club</option><option value='Entry 5'>Bass House</option><option value='Entry 6'>Breaks / Breakbeat / UK Bass</option><option value='Entry 7'>Dance / Electro Pop</option><option value='Entry 8'>Deep House</option><option value='Entry 9'>DJ Tools</option><option value='Entry 10'>Drum & Bass</option><option value='Entry 11'>Dubstep</option><option value='Entry 12'>Electro (Classic / Detroit / Modern)</option><option value='Entry 13'>Electronica</option><option value='Entry 14'>Funky House</option><option value='Entry 15'>Hard Dance / Hardcore</option><option value='Entry 16'>Hard Techno</option><option value='Entry 17'>House</option><option value='Entry 18'>Indie Dance</option><option value='Entry 19'>Jackin House</option><option value='Entry 20'>Mainstage</option><option value='Entry 21'>Melodic House & Techno</option><option value='Entry 22'>Minimal / Deep Tech</option><option value='Entry 23'>Nu Disco / Disco</option><option value='Entry 24'>Organic House / Downtempo</option><option value='Entry 25'>Progressive House</option><option value='Entry 26'>Psy-Trance</option><option value='Entry 27'>Tech House</option><option value='Entry 28'>Techno (Peak Time / Driving)</option><option value='Entry 29'>Techno (Raw / Deep / Hypnotic)</option><option value='Entry 30'>Trance (Main Floor)</option><option value='Entry 31'>Trance (Raw / Deep / Hypnotic)</option><option value='Entry 32'>Trap / Wave</option><option value='Entry 33'>UK Garage / Bassline</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(0)");

jQuery("#"+that+" .InputText:eq(0)").hide().val(pipe1);
jQuery("#s1").val(pipe1);

var select1 = document.getElementById("s1");
select1.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
}, false);

});

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

});

So both these fields have a dropdown.

And is it possible to make the dropdown icon bigger and move it inwards a little?

Thanks :)

parkie_0007
Author
Level 5 ●●●●●
151 replies
1 year ago
October 20, 2023

And when I just tested this in preview mode, not individual question preview mode, the drop down selection box needs extending like this.

Any ideas?

Thanks :)

+29

Nam Nguyen
QPN Level 8 ●●●●●●●●
1091 replies
1 year ago
October 20, 2023

parkie_0007 wrote:

And when I just tested this in preview mode, not individual question preview mode, the drop down selection box needs extending like this.

Any ideas?

Thanks :)

@parkie_0007 Each time you state a new element you need to assign it in that class that.

Nam Nguyen - XM Technology Consultant | DXCON Vietnam

parkie_0007
Author
Level 5 ●●●●●
151 replies
1 year ago
October 20, 2023

Thanks, but I am not a Java expert just yet….

I still get this.

Any chance you can help with the code? This is what I have.

var that=this.questionId;
var pipe1 = this.getTextValue(1);
var element="<select id='s1' class='Medium InputText'><option></option><option value='Entry 1'>140 / Deep Dubstep / Grime</option><option value='Entry 2'>Afro House</option><option value='Entry 3'>Amapiano</option><option value='Entry 4'>Bass / Club</option><option value='Entry 5'>Bass House</option><option value='Entry 6'>Breaks / Breakbeat / UK Bass</option><option value='Entry 7'>Dance / Electro Pop</option><option value='Entry 8'>Deep House</option><option value='Entry 9'>DJ Tools</option><option value='Entry 10'>Drum & Bass</option><option value='Entry 11'>Dubstep</option><option value='Entry 12'>Electro (Classic / Detroit / Modern)</option><option value='Entry 13'>Electronica</option><option value='Entry 14'>Funky House</option><option value='Entry 15'>Hard Dance / Hardcore</option><option value='Entry 16'>Hard Techno</option><option value='Entry 17'>House</option><option value='Entry 18'>Indie Dance</option><option value='Entry 19'>Jackin House</option><option value='Entry 20'>Mainstage</option><option value='Entry 21'>Melodic House & Techno</option><option value='Entry 22'>Minimal / Deep Tech</option><option value='Entry 23'>Nu Disco / Disco</option><option value='Entry 24'>Organic House / Downtempo</option><option value='Entry 25'>Progressive House</option><option value='Entry 26'>Psy-Trance</option><option value='Entry 27'>Tech House</option><option value='Entry 28'>Techno (Peak Time / Driving)</option><option value='Entry 29'>Techno (Raw / Deep / Hypnotic)</option><option value='Entry 30'>Trance (Main Floor)</option><option value='Entry 31'>Trance (Raw / Deep / Hypnotic)</option><option value='Entry 32'>Trap / Wave</option><option value='Entry 33'>UK Garage / Bassline</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(0)");

jQuery("#"+that+" .InputText:eq(0)").hide().val(pipe1);
jQuery("#s1").val(pipe1);

var select1 = document.getElementById("s1");
select1.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
}, false);

+28

Tom_1842
Level 8 ●●●●●●●●
876 replies
1 year ago
October 20, 2023

The addition of the Medium Input Text class looks nice! To turn the 2nd Form Field into a dropdown, you can copy the code, update the selector to point to a different Form field to hide, and change the id of the element that is inserted in its place. Also, to support displaying the selection on the back button, the values of the options can be the same as the labels. I also updated some other pieces like selecting the form field based on id instead of index. I used Flat layout. Try the below in the OnReady section:

//first form field dropdown
var form1 = document.getElementById("QR~"+this.questionId+"~1")
var pipe1 = this.getTextValue(1);
var element1="<select id='s1' class='Medium InputText'><option></option><option value='140 / Deep Dubstep / Grime'>140 / Deep Dubstep / Grime</option><option value='Afro House'>Afro House</option><option value='Amapiano'>Amapiano</option><option value='Bass / Club'>Bass / Club</option><option value='Bass House'>Bass House</option><option value='Breaks / Breakbeat / UK Bass'>Breaks / Breakbeat / UK Bass</option><option value='Dance / Electro Pop'>Dance / Electro Pop</option><option value='Deep House'>Deep House</option><option value='DJ Tools'>DJ Tools</option><option value='Drum & Bass'>Drum & Bass</option><option value='Dubstep'>Dubstep</option><option value='Electro (Classic / Detroit / Modern)'>Electro (Classic / Detroit / Modern)</option><option value='Electronica'>Electronica</option><option value='Funky House'>Funky House</option><option value='Hard Dance / Hardcore'>Hard Dance / Hardcore</option><option value='Hard Techno'>Hard Techno</option><option value='House'>House</option><option value='Indie Dance'>Indie Dance</option><option value='Jackin House'>Jackin House</option><option value='Mainstage'>Mainstage</option><option value='Melodic House & Techno'>Melodic House & Techno</option><option value='Minimal / Deep Tech'>Minimal / Deep Tech</option><option value='Nu Disco / Disco'>Nu Disco / Disco</option><option value='Organic House / Downtempo'>Organic House / Downtempo</option><option value='Progressive House'>Progressive House</option><option value='Psy-Trance'>Psy-Trance</option><option value='Tech House'>Tech House</option><option value='Techno (Peak Time / Driving)'>Techno (Peak Time / Driving)</option><option value='Techno (Raw / Deep / Hypnotic)'>Techno (Raw / Deep / Hypnotic)</option><option value='Trance (Main Floor)'>Trance (Main Floor)</option><option value='Trance (Raw / Deep / Hypnotic)'>Trance (Raw / Deep / Hypnotic)</option><option value='Trap / Wave'>Trap / Wave</option><option value='UK Garage / Bassline'>UK Garage / Bassline</option></select>";

jQuery(element1).insertAfter(form1);

jQuery(form1).hide().val(pipe1);
jQuery("#s1").val(pipe1);

var select1 = document.getElementById("s1");

select1.addEventListener('input', function (event) {
jQuery(form1).val(jQuery("#s1 option:selected").text());
}, false);


//2nd form field dropdown
var form2 = document.getElementById("QR~"+this.questionId+"~2");
var pipe2 = this.getTextValue(2);
var element2="<select id='s2' class='Medium InputText'><option></option><option value='140 / Deep Dubstep / Grime'>140 / Deep Dubstep / Grime</option><option value='Afro House'>Afro House</option><option value='Amapiano'>Amapiano</option><option value='Bass / Club'>Bass / Club</option><option value='Bass House'>Bass House</option><option value='Breaks / Breakbeat / UK Bass'>Breaks / Breakbeat / UK Bass</option><option value='Dance / Electro Pop'>Dance / Electro Pop</option><option value='Deep House'>Deep House</option><option value='DJ Tools'>DJ Tools</option><option value='Drum & Bass'>Drum & Bass</option><option value='Dubstep'>Dubstep</option><option value='Electro (Classic / Detroit / Modern)'>Electro (Classic / Detroit / Modern)</option><option value='Electronica'>Electronica</option><option value='Funky House'>Funky House</option><option value='Hard Dance / Hardcore'>Hard Dance / Hardcore</option><option value='Hard Techno'>Hard Techno</option><option value='House'>House</option><option value='Indie Dance'>Indie Dance</option><option value='Jackin House'>Jackin House</option><option value='Mainstage'>Mainstage</option><option value='Melodic House & Techno'>Melodic House & Techno</option><option value='Minimal / Deep Tech'>Minimal / Deep Tech</option><option value='Nu Disco / Disco'>Nu Disco / Disco</option><option value='Organic House / Downtempo'>Organic House / Downtempo</option><option value='Progressive House'>Progressive House</option><option value='Psy-Trance'>Psy-Trance</option><option value='Tech House'>Tech House</option><option value='Techno (Peak Time / Driving)'>Techno (Peak Time / Driving)</option><option value='Techno (Raw / Deep / Hypnotic)'>Techno (Raw / Deep / Hypnotic)</option><option value='Trance (Main Floor)'>Trance (Main Floor)</option><option value='Trance (Raw / Deep / Hypnotic)'>Trance (Raw / Deep / Hypnotic)</option><option value='Trap / Wave'>Trap / Wave</option><option value='UK Garage / Bassline'>UK Garage / Bassline</option></select>";

jQuery(element2).insertAfter(form2);

jQuery(form2).hide().val(pipe2);
jQuery("#s2").val(pipe2);

var select2 = document.getElementById("s2");

select2.addEventListener('input', function (event) {
jQuery(form2).val(jQuery("#s2 option:selected").text());
}, false);

To get the dropdowns to span the width of the container, try adding the below CSS to the look and feel:

.Skin .TE .ChoiceStructure .Medium {
    width: 100% !important;
}

+29

Nam Nguyen
QPN Level 8 ●●●●●●●●
1091 replies
1 year ago
October 20, 2023

@parkie_0007 Your code worked just fine on my side. Could you try delete the question and set it up again

Nam Nguyen - XM Technology Consultant | DXCON Vietnam

+27

TomG
Level 8 ●●●●●●●●
5938 replies
1 year ago
October 20, 2023

I’m not a fan coding the entire select in JavaScript. Besides being cumbersome and inefficient, it isn’t translation friendly. If you are interested, the formSelects function is easier to set up and has more functionality.

parkie_0007
Author
Level 5 ●●●●●
151 replies
1 year ago
October 21, 2023

Tom_1842 wrote:

//first form field dropdown
var form1 = document.getElementById("QR~"+this.questionId+"~1")
var pipe1 = this.getTextValue(1);
var element1="<select id='s1' class='Medium InputText'><option></option><option value='140 / Deep Dubstep / Grime'>140 / Deep Dubstep / Grime</option><option value='Afro House'>Afro House</option><option value='Amapiano'>Amapiano</option><option value='Bass / Club'>Bass / Club</option><option value='Bass House'>Bass House</option><option value='Breaks / Breakbeat / UK Bass'>Breaks / Breakbeat / UK Bass</option><option value='Dance / Electro Pop'>Dance / Electro Pop</option><option value='Deep House'>Deep House</option><option value='DJ Tools'>DJ Tools</option><option value='Drum & Bass'>Drum & Bass</option><option value='Dubstep'>Dubstep</option><option value='Electro (Classic / Detroit / Modern)'>Electro (Classic / Detroit / Modern)</option><option value='Electronica'>Electronica</option><option value='Funky House'>Funky House</option><option value='Hard Dance / Hardcore'>Hard Dance / Hardcore</option><option value='Hard Techno'>Hard Techno</option><option value='House'>House</option><option value='Indie Dance'>Indie Dance</option><option value='Jackin House'>Jackin House</option><option value='Mainstage'>Mainstage</option><option value='Melodic House & Techno'>Melodic House & Techno</option><option value='Minimal / Deep Tech'>Minimal / Deep Tech</option><option value='Nu Disco / Disco'>Nu Disco / Disco</option><option value='Organic House / Downtempo'>Organic House / Downtempo</option><option value='Progressive House'>Progressive House</option><option value='Psy-Trance'>Psy-Trance</option><option value='Tech House'>Tech House</option><option value='Techno (Peak Time / Driving)'>Techno (Peak Time / Driving)</option><option value='Techno (Raw / Deep / Hypnotic)'>Techno (Raw / Deep / Hypnotic)</option><option value='Trance (Main Floor)'>Trance (Main Floor)</option><option value='Trance (Raw / Deep / Hypnotic)'>Trance (Raw / Deep / Hypnotic)</option><option value='Trap / Wave'>Trap / Wave</option><option value='UK Garage / Bassline'>UK Garage / Bassline</option></select>";

jQuery(element1).insertAfter(form1);

jQuery(form1).hide().val(pipe1);
jQuery("#s1").val(pipe1);

var select1 = document.getElementById("s1");

select1.addEventListener('input', function (event) {
jQuery(form1).val(jQuery("#s1 option:selected").text());
}, false);


//2nd form field dropdown
var form2 = document.getElementById("QR~"+this.questionId+"~2");
var pipe2 = this.getTextValue(2);
var element2="<select id='s2' class='Medium InputText'><option></option><option value='140 / Deep Dubstep / Grime'>140 / Deep Dubstep / Grime</option><option value='Afro House'>Afro House</option><option value='Amapiano'>Amapiano</option><option value='Bass / Club'>Bass / Club</option><option value='Bass House'>Bass House</option><option value='Breaks / Breakbeat / UK Bass'>Breaks / Breakbeat / UK Bass</option><option value='Dance / Electro Pop'>Dance / Electro Pop</option><option value='Deep House'>Deep House</option><option value='DJ Tools'>DJ Tools</option><option value='Drum & Bass'>Drum & Bass</option><option value='Dubstep'>Dubstep</option><option value='Electro (Classic / Detroit / Modern)'>Electro (Classic / Detroit / Modern)</option><option value='Electronica'>Electronica</option><option value='Funky House'>Funky House</option><option value='Hard Dance / Hardcore'>Hard Dance / Hardcore</option><option value='Hard Techno'>Hard Techno</option><option value='House'>House</option><option value='Indie Dance'>Indie Dance</option><option value='Jackin House'>Jackin House</option><option value='Mainstage'>Mainstage</option><option value='Melodic House & Techno'>Melodic House & Techno</option><option value='Minimal / Deep Tech'>Minimal / Deep Tech</option><option value='Nu Disco / Disco'>Nu Disco / Disco</option><option value='Organic House / Downtempo'>Organic House / Downtempo</option><option value='Progressive House'>Progressive House</option><option value='Psy-Trance'>Psy-Trance</option><option value='Tech House'>Tech House</option><option value='Techno (Peak Time / Driving)'>Techno (Peak Time / Driving)</option><option value='Techno (Raw / Deep / Hypnotic)'>Techno (Raw / Deep / Hypnotic)</option><option value='Trance (Main Floor)'>Trance (Main Floor)</option><option value='Trance (Raw / Deep / Hypnotic)'>Trance (Raw / Deep / Hypnotic)</option><option value='Trap / Wave'>Trap / Wave</option><option value='UK Garage / Bassline'>UK Garage / Bassline</option></select>";

jQuery(element2).insertAfter(form2);

jQuery(form2).hide().val(pipe2);
jQuery("#s2").val(pipe2);

var select2 = document.getElementById("s2");

select2.addEventListener('input', function (event) {
jQuery(form2).val(jQuery("#s2 option:selected").text());
}, false);

To get the dropdowns to span the width of the container, try adding the below CSS to the look and feel:

.Skin .TE .ChoiceStructure .Medium {
    width: 100% !important;
}

Amazing, this worked.

Although in Chrome it looks like this.

And Safari like this.

Any idea how I would make them both look like Chrome?

And is it possible to pull the drop down arrow in a little and make it bigger?

Thanks :)

+28

Tom_1842
Level 8 ●●●●●●●●
876 replies
1 year ago
October 25, 2023

I think the select box arrow is built into the browser and can't really be modified with CSS beyond hiding it. In looking around a bit I think there are 2 approaches to try and make the select box look more consistent across browsers. I don’t have a great way of testing on Safari though.

In this post, it is recommended to hide the arrow and add a .svg arrow as a background. Try adding the below CSS to the Style section of the Look & Feel.

select {
appearance: none;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBmaWxsPSJncmF5IiBkPSJNMTAsMjMyLjdsNDkwLDUzNC41bDQ5MC01MzQuNUgxMHoiIC8+DQo8L3N2Zz4=);
background-repeat: no-repeat;
background-position: right;
background-size: 30px;
}

You could try using a jQuery plugin like Select2. First add this to the survey's Header:

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

Remove the CSS from my previous post, and then update the question’s JavaScript with the below, updating with the Genre options:

//first form field//
var form1 = document.getElementById("QR~"+this.questionId+"~1");
var pipe1 = this.getTextValue(1);
var element1="<select id='s1'><option ></option></select>";

jQuery(element1).insertAfter(form1);

var options1 = [
{id: "OPTION1",text: "OPTION1"},
{id: "OPTION2",text: "OPTION2"},
{id: "OPTION3",text: "OPTION3"},
{id: "OPTION4",text: "OPTION4"},
{id: "OPTION5",text: "OPTION5"}
];

jQuery("#s1").select2({
data: options1,
width: '100%'
});	

jQuery(form1).hide().val(pipe1);
jQuery("#s1").val(pipe1);
jQuery('#s1').trigger('change');

jQuery("#s1").on('change',function(){
jQuery(form1).val(jQuery("#s1 option:selected").text());
});


//second form field//
var form2 = document.getElementById("QR~"+this.questionId+"~2");
var pipe2 = this.getTextValue(2);
var element2="<select id='s2'><option ></option></select>";

jQuery(element2).insertAfter(form2);

var options2 = [
{id: "OPTION1",text: "OPTION1"},
{id: "OPTION2",text: "OPTION2"},
{id: "OPTION3",text: "OPTION3"},
{id: "OPTION4",text: "OPTION4"},
{id: "OPTION5",text: "OPTION5"}
];

jQuery("#s2").select2({
data: options2,
width: '100%'
});	

jQuery(form2).hide().val(pipe2);
jQuery("#s2").val(pipe2);
jQuery('#s2').trigger('change');

jQuery("#s2").on('change',function(){
jQuery(form2).val(jQuery("#s2 option:selected").text());
});

parkie_0007
Author
Level 5 ●●●●●
151 replies
1 year ago
October 26, 2023

Hi Tom

Thanks for getting back to me.

This made both drop down fields look the same in Safari and Chrome but removed the arrow. Or added a new one that I could not see?

Any ideas?

Thanks :)

Leave a Reply

Related posts

Python Converting an image into a ZBF file

Square multimode fiber with top haticon

Python Converting an image into a Binary BIM Image file

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded