[英]How to get the values from a dynamically created select box in fcbk multiple selection?
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. 下面的html代码是动态创建的选择框,它在fcbk自动完成功能中具有多个selectio值,并且在文本框中添加值时会不断添加。 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. 我对fcbk auto complete 1.8版做了相同的操作,但是现在我对2.8版一无所知。
reference - Demo : http://www.emposha.com/demo/fcbkcomplete_2/ 参考-演示: http : //www.emposha.com/demo/fcbkcomplete_2/
Documentation - http://www.emposha.com/javascript/fcbkcomplete.html 文档-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>
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: 她是一些实现您想要的jquery代码:
var txtarr =
$('#interestedin option.selected')
.map(function() { return $(this).text(); })
.toArray();
$('#result').val(txtarr.join(','));
assuming you got the followin html: 假设您获得了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; 这是一个jsfiddle供您尝试;
How to execute this code when an item is added/removed: 添加/删除项目时如何执行此代码:
The plugin offer two callbacks option: onselect
/ onremove
: 该插件提供了两个回调选项: 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. 我无法对此进行测试,因为该插件仅接受URL作为数据源,但似乎应该可以使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.