0
我得到了一点codepen，其中我有多个可选择的选项卡（带有jQuery可选小部件）。在上面，我得到了一个带有文本输入和提交按钮的表单。当我插入一些文本并提交时，它会将文本添加到每个选项卡上的列表中。我的目标是输入文本只会附加到选定选项卡的列表中。 那是我的javascript：仅将列表项添加到选定选项卡中的列表
$(function() {
function selectionChange(event, ui) {
var items = $('.ui-selected', this).map(function() {
return $(this).index();
}).get();
$("section").each(function() {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist').append('<li>' + val + '</li>');
e.preventDefault();
});
});
并且那是HTML：
<form id="plannerform">
<input id="plannername" placeholder="Name eingeben" type="text"></input><!--
--><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">1
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">2
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">3
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">4
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">5
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">6
<ul class="plannerlist">
</ul>
</section>
</div>
如果你需要更多的代码，完整的代码是我codepen我上面提到的。
啊，我不知道：可见。感谢那个简单的解决方案。第二部分，该项目被追加到第一个列表上，当没有选项卡被选中时，对我来说是非常不相关的，因为我希望用户先选择一些标签然后提交（我会用一些注释来标识）。但是，谢谢你:)很高兴知道。 –
@TobiasGlaus np。在这种情况下，如果有人没有选择标签（可能是坏的UX，因为用户可能不知道他们必须在搜索之前选择标签），或者默认选择第一个标签（似乎是更好的解决方案）。 –
是的，它就像一个计划者，你可以注册几天。所以我认为禁用搜索输入是最好的解决方案 –