如何在 selectize.js 中有两个具有拖放功能的输入字段？

Question

所需的功能

• 两个具有拖放功能的输入字段。
• 在每个输入字段下方生成'value' div。

当前功能

正在创建四个生成的'value' div，而不是两个。

插件演示（选择Plugins 标签并滚动到"drag_drop"）

http://brianreavis.github.io/selectize.js

我的尝试：

http://jsfiddle.net/rwone/E72q5/5/

HTML 表单

<!-- simple html form - a container with left and right divs -->

<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
<div class="my_form_container">
<div class="my_form_left">
<p>field one</p>
<p>field two</p>
</div>
<div class="my_form_right">
<div class="input_wrapper">
<input type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a">
</div>
<div class="input_wrapper">
<input type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a">
</div>
</div>
<div class="my_form_button">
<button type="submit">submit</button>
</div>
</div>
</form>
</div>

jQuery

// aim:  to have a unique 'value' div beneath each input field. 

// selectize drag and drop functionality

$('.input-sortable').selectize({
plugins: ['drag_drop'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});

// the js that should add a 'value' div after each input box

$(function() {
var $wrapper = $('.input_wrapper');
// show current input values
$('select.selectized,input.selectized', $wrapper).each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }

$(this).on('change', update);
update();

$container.insertAfter($wrapper);
});
});

Answer 1

我根据你的意见做了一个小提琴。

http://jsfiddle.net/Shinov/csNgy/

 $input.parents(".field-row:first").append($container)