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，因爲用戶可能不知道他們必須在搜索之前選擇標籤），或者默認選擇第一個標籤（似乎是更好的解決方案）。 –
是的，它就像一個計劃者，你可以註冊幾天。所以我認爲禁用搜索輸入是最好的解決方案 –