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 :)
Page 1 / 1
@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>";
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?
var select1 = document.getElementById("s1"); select1.addEventListener('input', function (event) { jQuery("#"+that+" .InputText:eq(0)").val(jQuery("#s1 option:selected").text()); }, false);
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>";
@parkie_0007 Your code worked just fine on my side. Could you try delete the question and set it up again
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.
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>";
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 :)
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.
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 = s {id: "OPTION1",text: "OPTION1"}, {id: "OPTION2",text: "OPTION2"}, {id: "OPTION3",text: "OPTION3"}, {id: "OPTION4",text: "OPTION4"}, {id: "OPTION5",text: "OPTION5"} ];
//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 = s {id: "OPTION1",text: "OPTION1"}, {id: "OPTION2",text: "OPTION2"}, {id: "OPTION3",text: "OPTION3"}, {id: "OPTION4",text: "OPTION4"}, {id: "OPTION5",text: "OPTION5"} ];
