Free Format Combo (Dropdown) for Multiple Select

Question

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.

Comments

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?

Answer 1

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.

Comments

Thanks. Your suggestion is great - it had resolved my problem!