How to get the values from a dynamically created select box in fcbk multiple selection?

Question

The html code below is the dynamically created select box with selected values in fcbk autocomplete with multiple selectio, it keeps adding while adding the value in the text box. I want to get the values of this text box and get it added in a textbox as comma separated values. I did the same with fcbk auto complete version 1.8 but now i have no idea with 2.8.

reference - Demo : http://www.emposha.com/demo/fcbkcomplete_2/

Documentation - http://www.emposha.com/javascript/fcbkcomplete.html

<select id="interestedin" class=" hidden" multiple="multiple" name="interstedin[]">
    <option id="opt_X1B68LKqUz0w09w2w8gymEoNsgm7Cmz9" class="selected" selected="selected" value="2">Canon‌·Powershot‌·</option>
    <option id="opt_GBLgf5byTaH4xlhSiaZh02Ug39ALVNpL" class="selected" selected="selected" value="5">Levis‌·Jeans</option>
    <option id="opt_TLywToQcvQ9bcLFmCCSm2vmtQUW9NDEo" class="selected" selected="selected" value="8">Dashing‌·Cars</option>
    <option id="opt_vGDDgTGeyQVb6kGb8eaKVSG5qdyTaTfA" class="selected" selected="selected" value="8">Dashing‌·Cars</option>
    </select>

Answer 1

I've quickly checked the source code for this plugin but it does not seem to provide such functionnality out-of-the-box. And their documentation is pretty minimal :-/

Her's some jquery code to achieve what you want:

var txtarr =
  $('#interestedin option.selected')
    .map(function() { return $(this).text(); })
    .toArray();

$('#result').val(txtarr.join(','));

assuming you got the followin html:

<select id="interestedin" class=" hidden" multiple="multiple" name="interstedin[]">
<option id="opt_X1B68LKqUz0w09w2w8gymEoNsgm7Cmz9" class="selected" selected="selected" value="2">Canon‌·Powershot‌·</option>
<option id="opt_GBLgf5byTaH4xlhSiaZh02Ug39ALVNpL" class="selected" selected="selected" value="5">Levis‌·Jeans</option>
<option id="opt_TLywToQcvQ9bcLFmCCSm2vmtQUW9NDEo" class="selected" selected="selected" value="8">Dashing‌·Cars</option>
<option id="opt_vGDDgTGeyQVb6kGb8eaKVSG5qdyTaTfA" class="selected" selected="selected" value="8">Dashing‌·Cars</option>
</select>

<input type="text" id="result" size="200" />

Here's a jsfiddle for you to try;

---

How to execute this code when an item is added/removed:

The plugin offer two callbacks option: onselect / onremove :

// cache jquery selections for re-use
var $resultField = $('#result'),
    $selectElement = $('#interestedin');

// the function to build the comma-separated string
var changeFCBKHandler = function(item) {
     var txtarr = $selectElement.find('option.selected')
                     .map(function() { return $(this).text(); })
                     .toArray();

      $resultField .val(txtarr.join(','));
};

// reference the 'changeFCBKHandler' handler for the onselect/onremove callbacks
$selectElement.fcbkcomplete({
    ...
    onselect: changeFCBKHandler,
    onremove: changeFCBKHandler
    ...
});

I've not been able to test this because the plugin only accepts an URL as data-source but it seems it should work.