如何从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多选中动态创建的选择框中获取值？

回答

相关问题