Home/ Questions/Q 6875347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:18:39+00:00

The html code below is the dynamically created select box with selected values in

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0