Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Free Format Combo (Dropdown) for Multiple Select

How can I do a free format question with the Combo (dropdown menu) option for multiple select, rather than single select?

The following doesn't work:

<SELECT MULTIPLE="multiple" NAME="FF1_COLOR" ID="FF1_COLOR">
<OPTION SELECTED VALUE="">Choose all that apply</OPTION>
<OPTION VALUE="1">Red</OPTION>
<OPTION VALUE="2">Green</OPTION>
<OPTION VALUE="3">Blue</OPTION>
</SELECT>

I am trying out something with the Image Picker JQuery plugin which uses dropdown multiple select .

Thanks.
asked Dec 18, 2016 by Anthony Ang (485 points)
retagged Dec 18, 2016 by Walter Williams
What's not working with your code?  I am able to select multiple options holding Ctrl using the code.

As an aside, I'm not a huge fan of HTML's built-in multiple select combobox.  Some third-party libraries handle it much better, in my opinion.  I used "MultiSelect" just last week and was quite impressed: http://www.erichynds.com/blog/jquery-ui-multiselect-widget (Demos: http://labs.abeautifulsite.net/archived/jquery-multiSelect/demo/)
If you select more than 1 option and go to the Admin page, Sawtooth only captures the first response, not all the selected options in a Free format combo.

How can I get all the options selected in Sawtooth's output?

1 Answer

+1 vote
When using a free format combobox variable, the Sawtooth JavaScript and database only expect a single response.  To store multiple responses, you'll need to use multiple variables or a variable capable of storing multiple responses.  I would recommend using the free format checkbox variable.  You will then need to use some JavaScript to send info between the combobox and checkboxes.  Here's an example:

<div id="[% QuestionName() %]_checks">
    [% CheckSelect(FF1_COLOR, 1) %]
    [% CheckSelect(FF1_COLOR, 2) %]
    [% CheckSelect(FF1_COLOR, 3) %]
</div>

<select multiple id="[% QuestionName() %]_combo">
    <option selected value="">Choose all that apply</option>
    <option value="1">Red</option>
    <option value="2">Green</option>
    <option value="3">Blue</option>
</select>

<style>
#[% QuestionName() %]_checks {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_combo').change(function(){
        var selected = $('#[% QuestionName() %]_combo').val();
        for (var i = 1; i <= 3; i++) {
            if (selected.indexOf(i.toString()) != -1) {
                SSI_SetSelect('[% QuestionName() %]_COLOR_' + i, true);
            }
            else {
                SSI_SetSelect('[% QuestionName() %]_COLOR_' + i, false);
            }
        }
    });
})
</script>


The "3" in line 24 should be updated with the number of items in the combobox.
answered Dec 19, 2016 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
Thanks. Your suggestion is great - it had resolved my problem!
...