如何從fcbk多選中動態創建的選擇框中獲取值？

下面的html代碼是動態創建的選擇框，其中fcbk自動完成與多個選擇中的選定值，它在添加文本框中的值時繼續添加。我想獲取這個文本框的值，並將它作爲逗號分隔值添加到文本框中。我做了與fcbk自動完整版1.8相同的，但現在我不知道2.8。如何從fcbk多選中動態創建的選擇框中獲取值？

參考 - 演示：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>

來源

2011-11-25 Bala.C

我趕緊檢查了源代碼，這個插件，但它似乎並沒有提供這樣的functionnality外的開箱。而他們的文檔是相當小： -/

她的一些jQuery代碼來實現你想要的：

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

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

假設你得到了跟隨着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作爲數據源，但它似乎應該工作。

來源

2011-11-25 11:57:51

onSelect事件會做:) ..會檢查你的小提琴現在..謝謝didier！ –

...謝謝...你完全理解我想要做什麼..如何選擇一個項目並在未選中時將其移除？注意：我將在fcbkcomplete插件中使用這個函數 –

Didier是你嗎？ –

如何從fcbk多選中動態創建的選擇框中獲取值？

回答

相關問題