如何從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作為數據源，但似乎應該可以使用。