如何使用燃料UX柱塞作为HTML表单中的元素？
如何使用燃料UX柱塞作为HTML表单中的元素？
提问于 2015-04-14 13:11:46
我正在玩燃料UX柱塞组件，我想让它成为我必须提交的表格的一部分。不幸的是，该控件不包含任何要提交的表单元素，这使得它很酷，但对我来说是无用的。我在HTML代码中添加了一个输入：：隐藏元素，但现在我不得不强制支柱盒组件使用表单元素，我不知道该如何做。
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
我真正需要的是在添加或从列表中删除新标记时使用JavaScript更新输入：：隐藏元素。
哦，JavaScript不是我的强项。
燃料UX组件有用于、add、和的事件，删除了可能必须使用的新标记，但正如我所提到的，不知道如何实现它。
如果您有任何建议，请帮助，或如果您有任何其他建议，如何使用HTML表单实现支柱盒组件-我是开放的新想法。
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-14 14:39:38
HTML：
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript：
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});这个示例输出到JSON对象结构中，因为支柱盒控件支持每个药丸的文本和值属性(以及更多的带有数据属性)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29628271
复制相关文章
相似问题
腾讯云开发者
