问题排序选择选项

链接的片段只是我正在做的事情的一个粗略示例，但将演示我遇到的问题。我有两个选择框，可以在它们之间转移项目。当我稍后通过ajax调用提交更改时，我需要跟踪项目何时从其原始框中移动，因为我不想在传输中包括整个列表，只想包括必要的内容。(我的真实数据是更大的列表(

为了保持跟踪，我使用了一个数据属性，"数据已更改"。为了帮助反映标记为更新的内容，我在该特定选项上切换了一个类。这一切都很好用。我的问题是当我试图对这些列表进行排序时。选项按预期排序，但在这个过程中似乎失去了数据属性，这破坏了其他内容。我不知道怎么解决这个问题。

https://jsfiddle.net/bnLfhpq4/

$('#btnSubmit').click(function(e) {
e.preventDefault();
var arr = new Array();
// get options from active list
var options = $('#activeList option');
options.each(function(i, o) {
if ($(o).data('changed') == "yes") {
var skill = {
id: $(o).val(),
active: 0
}
arr.push(skill);
}
});
// get options from inactive list
var options = $('#inactiveList option');
options.each(function(i, o) {
if ($(o).data('changed') == "yes") {
var skill = {
id: $(o).val(),
active: 1
}
arr.push(skill);
}
});
console.log(arr);
});
$('#btn_in').click(function() {
var options = $('#activeList option:selected');
options.each(function(i, o) {
var c = $(o).data('changed');
if (c == "yes") {
$(o).data('changed', 'no');
$(o).removeClass('flagged');
} else {
$(o).data('changed', 'yes');
$(o).addClass('flagged');
}
});
$('#inactiveList').append(options);
//sortOptions('#inactiveList');
});

$('#btn_out').click(function() {
var options = $('#inactiveList option:selected');
options.each(function(i, o) {
var c = $(o).data('changed');
if (c == "yes") {
$(o).data('changed', 'no');
$(o).removeClass('flagged');
} else {
$(o).data('changed', 'yes');
$(o).addClass('flagged');
}
});
$('#activeList').append(options);
sortOptions('#activeList');
});

function sortOptions(selector) {
var options = $(selector + ' option');
options.sort(function(a, b) {
if (a.text > b.text) return 1;
if (a.text < b.text) return -1;
return 0;
});
$(selector).empty().append(options);
}

.superSelect {
min-height: 200px;
}
.buttons {
display: inline-block
}
.flagged {
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="activeList" class="superSelect">
<option value="t1" data-changed="no">Option 1</option>
<option value="t2" data-changed="no">Option 2</option>
<option value="t3" data-changed="no">Option 3</option>
<option value="t4" data-changed="no">Option 4</option>
</select>
<div class="buttons">
<button id="btn_in">>>></button><br/><br/>
<button id="btn_out"><<<</button>
</div>
<select multiple id="inactiveList" class="superSelect">
<option value="x1" data-changed="no">Thingy 1</option>
<option value="x2" data-changed="no">Thingy 2</option>
<option value="x3" data-changed="no">Thingy 3</option>
<option value="x4" data-changed="no">Thingy 4</option>
</select>
<br/>
<button id="btnSubmit">Submit</button>

这个答案已经很好地解释了为什么不将data-属性和data()混合。因此，将所有内容更改为使用.attr('data-changed')，它就会工作。

它在没有排序功能的情况下工作的原因是，当通过empty()从DOM中删除节点并通过append()重新添加该节点时，jQuery内部存储的数据与DOM节点之间的关联明显丢失
您不需要使用额外的类来可视化更改后的选项。只需在CSS中使用属性选择器[data-changed="yes"]
每个按钮单击事件的两个回调几乎相同，只是交换的列表ID不同。我重构了代码，使用一个函数并在列表之间动态切换
尽管这可能只是您为本演示创建的代码中的情况，而不是您实际的应用程序中的情况：避免使用<和>字符(在按钮标签中(，而不将它们编码为HTML实体</>。尽管所有主要的浏览器都应该很好地呈现按钮，但客户端的解析器可能会混淆并导致一些显示问题

$('#btnSubmit').click(function(e) {
e.preventDefault();
var arr = new Array();
// get options from active list
var options = $('#activeList option');
options.each(function(i, o) {
if ($(o).data('changed') == "yes") {
var skill = {
id: $(o).val(),
active: 0
}
arr.push(skill);
}
});
// get options from inactive list
var options = $('#inactiveList option');
options.each(function(i, o) {
if ($(o).data('changed') == "yes") {
var skill = {
id: $(o).val(),
active: 1
}
arr.push(skill);
}
});
console.log(arr);
});
$activeList = $('#activeList');
$inactiveList = $('#inactiveList');
function moveOptions() {
var $otherList = this === $activeList ? $inactiveList : $activeList;
var options = $('option:selected', this);
options.each(function(i, o) {
var c = $(o).data('changed');
if (c == "yes") {
$(o).attr('data-changed', 'no');
} else {
$(o).attr('data-changed', 'yes');
}
});
$otherList.append(options);
sortOptions($otherList);
}
$('#btn_in').click(moveOptions.bind($activeList));
$('#btn_out').click(moveOptions.bind($inactiveList));
function sortOptions(list) {
var options = $('option', list);
options.sort(function(a, b) {
if (a.text > b.text) return 1;
if (a.text < b.text) return -1;
return 0;
});
list.empty().append(options);
}

.superSelect {
min-height: 200px;
}
.buttons {
display: inline-block
}
[data-changed="yes"] {
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="activeList" class="superSelect">
<option value="t1" data-changed="no">Option 1</option>
<option value="t2" data-changed="no">Option 2</option>
<option value="t3" data-changed="no">Option 3</option>
<option value="t4" data-changed="no">Option 4</option>
</select>
<div class="buttons">
<button id="btn_in">&gt;&gt;&gt;</button><br/><br/>
<button id="btn_out">&lt;&lt;&lt;</button>
</div>
<select multiple id="inactiveList" class="superSelect">
<option value="x1" data-changed="no">Thingy 1</option>
<option value="x2" data-changed="no">Thingy 2</option>
<option value="x3" data-changed="no">Thingy 3</option>
<option value="x4" data-changed="no">Thingy 4</option>
</select>
<br/>
<button id="btnSubmit">Submit</button>

相关内容

最新更新

热门标签：