如何从fcbk多项选择中动态创建的选择框中获取值？

Question

下面的html代码是动态创建的选择框，它在fcbk自动完成功能中具有多个selectio值，并且在文本框中添加值时会不断添加。 我想获取此文本框的值，并将其添加为文本框中的逗号分隔值。 我对fcbk auto complete 1.8版做了相同的操作，但是现在我对2.8版一无所知。

参考-演示： http : //www.emposha.com/demo/fcbkcomplete_2/

文档-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

我已经快速检查了此插件的源代码，但它似乎并没有提供这种功能。 他们的文档非常少：-/

她是一些实现您想要的jquery代码：

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

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

假设您获得了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" />

这是一个jsfiddle供您尝试；

---

添加/删除项目时如何执行此代码：

该插件提供了两个回调选项： 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
    ...
});

我无法对此进行测试，因为该插件仅接受URL作为数据源，但似乎应该可以使用。