有條件地填充列表框

我有兩個列表框，可供選擇。我想確保刪除所選的可用選項。有條件地填充列表框

用我的代碼下面的所有項目都放在可用和沒有選中。我究竟做錯了什麼？

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>'); 
    } 
}

來源

2017-01-09 GoGetSOme

那麼儘管'if'條件，你做的正是在每次迭代同樣的事情。嘗試在'else'上做任何事（*或將其移除*）。 –

確保在選中「可用」列表中的任何'選定'標籤。否則，所選的任何東西將*總是*可用，因此將被添加到可用列表中。 –

試試這個：

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>

來源

2017-01-09 17:20:17

這就是我想要完成的。謝謝。 .map（）函數很有趣。 – GoGetSOme

您可以在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>

來源

2017-01-09 17:22:12 Deep

或者，去老派：

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>'); 
 
    } 
 
    } 
 

 
}

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

 
</select> 
 
<select id="lstAvailableTags"> 
 

 
</select>

來源

2017-01-09 17:27:33 Snowmonkey

有條件地填充列表框

回答

相關問題