Question

我有两个列表框，可用并已选中。我想确保删除所选的可用选项。

使用下面的代码，所有项目都放在可用的项目中，而在所选项目中没有项目。我做错了什么？

var availableTags = [];
var selectedTags = [];

var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]';
var jsonSelected = '[{"id":"4","name":"Four"}]';

availableTags = $.parseJSON(jsonAvailble);
selectedTags = $.parseJSON(jsonSelected);

for (var i = 0; i < availableTags.length; ++i) {

    //console.log($.inArray(availableTags[i].id, selectedTags));

    if ($.inArray(availableTags[i].id, selectedTags) >= 0) {

        $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    }
    else{
        $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    }
}

Answer 1

试试这个：

var availableTags = [];
var selectedTags = [];

var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]';
var jsonSelected = '[{"id":"4","name":"Four"}]';

availableTags = $.parseJSON(jsonAvailble);
selectedTags = $.parseJSON(jsonSelected);
var selectedTags1=selectedTags.map(function(d) { return d['id']; });
for (var i = 0; i < availableTags.length; ++i) {

    if ($.inArray(availableTags[i].id, selectedTags1) != -1) {

        $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    }
    else{
        $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    }
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Selected:<select id="lstSelectedTags"></select>

Available:<select id="lstAvailableTags"></select>

Answer 2

您可以在availableTags上使用过滤器来获得所需的结果

在下面的工作示例中，我将过滤所有那些在selectedTags中存在值的availableTags中的元素。

var availableTags = [];
var selectedTags = [];

var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]';
var jsonSelected = '[{"id":"4","name":"Four"}]';

availableTags = $.parseJSON(jsonAvailble);
selectedTags = $.parseJSON(jsonSelected);


availableTags = availableTags.filter(function(elem) {

  if ($.grep(selectedTags, function(e) {
    return e.id == elem.id
  }).length == 0) return elem;

});


console.log(availableTags);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

或者，去老派：

＆＃13;

var availableTags = [];
var selectedTags = [];

var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]';
var jsonSelected = '[{"id":"4","name":"Four"}]';

availableTags = $.parseJSON(jsonAvailble);
selectedTags = $.parseJSON(jsonSelected);

for (var i = 0; i < availableTags.length; ++i) {
  for (var j = 0; j < selectedTags.length; ++j) {
    console.log(availableTags[i].id + ", " + selectedTags[j].id)
    if (availableTags[i].id === selectedTags[j].id) {

      $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    } else {
      $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>');
    }
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lstSelectedTags">

</select>
<select id="lstAvailableTags">

</select>

＆＃13;

有条件地填充列表框

3 个答案: