Question

下面的html代码是动态创建的选择框，其中fcbk autocomplete中的选定值具有多个选择，它会在文本框中添加值时不断添加。我想获取此文本框的值，并将其作为逗号分隔值添加到文本框中。我用fcbk auto完整版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(','));

假设你得到了以下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作为数据源，但它似乎应该有效。

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

1 个答案: