Hi,
When we use the dependent drill down which consists of multiple dropdowns where the second dropdown is populated with a list of options based on the option selected in the first dropdown. I am able to set the first blank option as 'Select' but I wasn't able to do it for the 2nd and 3rd dropdowns which end up showing a blank option
Here is my code snippet which I used to set the blank options in the dropdowns
{
var selects = jQuery("#"+this.questionId+" select");
console.log("my selects", selects);
selects.eq(0).find("option:eq(0)").text("Select").attr("selected",true);
selects.eq(1).find("option:eq(0)").text("Select").attr("selected",true);
selects.eq(2).find("option:eq(0)").text("Select").attr("selected",true);
}
Solved
Setting default values in a question with multiple dropdowns or a drilldown
+2Best answer by Diviz
Maybe I am not explaining it properly I think. Let me try to put it this way.
I have multiple dropdowns/a drill-down the first dropdown/select shows me a list of options obviously the first option in the first select is blank instead of blank I added some text "Select" like below
{
var selects = jQuery("#"+this.questionId+" select");
console.log("my selects", selects);
selects.eq(0).find("option:eq(0)").text("Select").attr("selected",true);
}
then in the second dropdown/select which also has a list of values which get enabled after an option is selected from the first select. Users can select any option from this list but here also the first option is blank. So instead of that, I wanted to show "Select" text similar to what I have done on the first select/dropdown.
So I thought the below code would set that text
{
var selects = jQuery("#"+this.questionId+" select");
console.log("my selects", selects);
//below line sets "select" text for blank option
selects.eq(0).find("option:eq(0)").text("Select").attr("selected",true);
//This line is not able to set the "Select" text in place of blank option when it gets enabled after //selecting a option from the first select
selects.eq(1).find("option:eq(0)").text("Select").attr("selected",true);
}
Note: The second select doesn't set a value instead it shows a list of options when an option was selected from the first select. However, the list that it shows contains a blank option instead of "Select" text
+27There are no options for the second select until a non-blank option is selected in the first select.
+2Yes, Correct. If the first select has a value "Blank option/Select text" then the second select/dropdown has no values. It will be populated based on the option selected from the first select/dropdown. but I need the first option of that second select to show "Select" text instead of the Blank option when I select some non-blank value in the first select.
Currently, it's showing a list of options in the second select/dropdown but the first option in that dropdown is blank.
+27https://community.qualtrics.com/XMcommunity/discussion/comment/46103#Comment_46103I was pointing out why what you were attempting didn't work. You can't update or select an option that doesn't exist. You could add an option like this:
selects.eq(1).append("");
but it will go away as soon as something is selected in the first select.
+2Maybe I am not explaining it properly I think. Let me try to put it this way.
I have multiple dropdowns/a drill-down the first dropdown/select shows me a list of options obviously the first option in the first select is blank instead of blank I added some text "Select" like below
{
var selects = jQuery("#"+this.questionId+" select");
console.log("my selects", selects);
selects.eq(0).find("option:eq(0)").text("Select").attr("selected",true);
}
then in the second dropdown/select which also has a list of values which get enabled after an option is selected from the first select. Users can select any option from this list but here also the first option is blank. So instead of that, I wanted to show "Select" text similar to what I have done on the first select/dropdown.
So I thought the below code would set that text
{
var selects = jQuery("#"+this.questionId+" select");
console.log("my selects", selects);
//below line sets "select" text for blank option
selects.eq(0).find("option:eq(0)").text("Select").attr("selected",true);
//This line is not able to set the "Select" text in place of blank option when it gets enabled after //selecting a option from the first select
selects.eq(1).find("option:eq(0)").text("Select").attr("selected",true);
}
Note: The second select doesn't set a value instead it shows a list of options when an option was selected from the first select. However, the list that it shows contains a blank option instead of "Select" text
+27https://community.qualtrics.com/XMcommunity/discussion/comment/46106#Comment_46106You need an event handler:
selects.eq(0).change(function() {
selects.eq(1).find("option:first").html("Select").prop("selected",true);
});
+2Hey TomG ,
The solution you suggested worked fine. However, whenever a user clicks on the previous or next button in the survey question. It is triggering the onChange event of dropdown/select in the below code snippet of yours.
selects.eq(0).change(function() {
selects.eq(1).find("option:first").html("Select").prop("selected",true);
});
+27It is surprising that the buttons on triggering a change event. You could check to make sure a value isn't already selected before selecting the default value.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.