Differences

This shows you the differences between two versions of the page.

--- formselects [2022/10/10 14:42] – [formSelects - Convert form fields to dropdowns without custom JavaScript] admin
+++ formselects [2025/02/06 11:48] (current) – [Survey Header] admin
@@ Line 6: / Line 6: @@
   * Optional searchable selects using [[https://select2.org/getting-started/basic-usage|select2]]
   * Optional dynamic option creation using select2
-  * Supports multi-select dropdowns
+  * Supports multi-selects
-  * Supports back button - even when a dynamic option is created
+  * Supports back button - even when dynamic options are created
+  * Supports default choices
   * Translation friendly
+  * Supports "New Survey Experience" (aka Simple layout)!
-This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]]** on the Qualtrics Community to learn more.
+Here is a quick video demonstration:\\
+{{ ::formSelects.mp4?770 |formSelects Demonstration}}
+This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/inbox/conversation?with=373|TomG]]** on the Qualtrics Community to learn more.
 ===== Set-up Instructions =====
 ==== Survey Header ====
@@ Line 18: / Line 23: @@
 <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
+</code>
+=== Add jQuery (only if using New Survey Experience) ===
+<code>
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
 </code>
 === Add formSelects Function ===
@@ Line 33: / Line 42: @@
 </code>
 ==== QuestionText Select HTML ====
-In HTML Source mode, add the html for the select(s). Each select should be assigned a unique class name that will be referenced in the corresponding **[[formselects#choice_label_html|Choice Label HTML]]**. Additional attributes (e.g., style) may be added to the ''<select>'' tag as needed.
+In ''HTML View'' mode, add the html for the select(s). Each select should be assigned a unique class name that will be referenced in the corresponding **[[formselects#choice_label_html|Choice Label HTML]]**. To make a select a multi-select add the attribute ''multiple=%%"multiple"%%'' to the ''<select>'' tag. Additional attributes (e.g., style) may be added to the ''<select>'' tag as needed.
-''value'' attributes are NOT required in the select's option tags. If value attributes are used, the value will be saved in Qualtrics instead of the option text. If dynamic option creation (i.e., select2 tags) is being used, the value attribute **should not** be used.
+''value'' attributes are NOT required in the select’s option tags. If value attributes are used, the value will be saved in Qualtrics instead of the option text. If dynamic option creation (i.e., select2 tags) is being used, the value attribute **should not** be used.
 Example select HTML:
@@ Line 51: / Line 60: @@
 </code>
 ==== Choice Label HTML ====
-To convert a field to a select put the choice label inside a ''<span>'' tag with the attribute ''data-select=//classname//'' where classname matches the class of a select tag in the **[[formselects#questiontext_select_html|QuestionText Select HTML]]**. For example:
+=== data-select ===
+To convert a field to a select put the choice label inside a ''<span>'' tag with the attribute ''data-select=//%%"classname"%%//'' where classname matches the class of a select tag in the **[[formselects#questiontext_select_html|QuestionText Select HTML]]**. For example:
 <code>
 <span data-select="states">State</span>
 </code>
+=== data-select2 ===
-To make the select a searchable select (i.e., select2), add the attribute ''data-select2''. For example:
+To make the select a searchable select (i.e., select2) using the default options, add the attribute ''data-select2''. For example:
 <code>
 <span data-select="states" data-select2>State</span>
@@ Line 65: / Line 75: @@
 <span data-select="states" data-select2='{"placeholder":"Select a state","tags":true}'>State</span>
 </code>
+=== data-join ===
+When a multi-select dropdown is used, the choices must be joined together into a single string to save them in the  text form field. By default the choices are joined with ", " (comma+space). To join using a different string, add a ''data-join'' attribute with the value of the join string. For example:
+<code>
+<span data-select="states" data-select2 data-join="|">State</span>
+</code>
 ====== Qualtrics Wiki ======
 [[start|Qualtrics Wiki]]