dynamically toggle chosen js between single and multiple input

Question

I am using chosen.js and I would like a select control which can dynamically be switched between multiple and single inputs. Is this possible?

In the example below, I attempt to update chosen when the checkbox is checked. The select correctly has the multiple attr added and removed, but chosen does not toggle between multiple and single select.

HTML

<select id="my-select">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input type="checkbox" id="my-checkbox">Multiple Selection

JavaScript

$("#my-checkbox").change(function () {
    if ($('#my-checkbox').prop('checked')) {
        $('#my-select').attr('multiple', '').trigger("chosen:updated");
    } else {
        $('#my-select').removeAttr('multiple').trigger("chosen:updated");
    }
});

JSFiddle: http://jsfiddle.net/85xV3/

Answer 1

Chosen ( although Im new to it), after inspecting the code, creates it's own markup for the select and sets the original as hidden, this is why setting the attributes on the select have no effect.

There is no clean way to do this ( AFAIK ) , other than rebuilding the .chosen() each time.

---

Have a look at this rough demo - http://jsfiddle.net/AxG7G/

---

The key part in the code is that for each change, we use a function to rebuild the original select and redraw the .chosen()

Some additional Markup

<div id="selectcontainer">
    <select id="my-select">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
</div>
<input type="checkbox" id="my-checkbox"/>Multiple Selection

---

Then JS with the remake function

var $select = $('#my-select'), $selectContainer=$('#selectcontainer'), 
$checkbox=$( "#my-checkbox" );

/* start the default .chosen() presentation */
$select.chosen();

function reDrawSelect(multiple) {

    /* get the current select options and attributes */
    var _selectHTML = $selectContainer.find('#my-select').html(); 
    /* clear it */
    $selectContainer.html(""); 
    /* redraw it */
    $select = $('<select id="my-select">'+_selectHTML+'</select>');
    /* set multiple if */
    if(multiple) { $select.attr('multiple','true'); }
    $selectContainer.append($select);
    /* re make .chosen() */
    $select.chosen();


}

$checkbox.change(function() { reDrawSelect($checkbox.is(':checked')); });

---

Update: This may only solve half the problem ( what happens when there are multiple options selected, but then switch back to single for example ... )

Edits: fixing some problems/syntax from first example

Answer 2

I found a bit simpler solution with the destroy method. I checked when the destroy method was added to Chosen. It was in version 0.14.0 so it's no news although it was documented recently in version 1.5.0.

var checkbox = $('#my-checkbox');
var select   = $('#my-select').chosen();

checkbox.change(function() {
  select
    .chosen('destroy')
    .attr('multiple', checkbox.prop('checked'))
    .chosen();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

<select id="my-select">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

<input type="checkbox" id="my-checkbox">Multiple Selection