循环遍历数据数组变量并从多选下拉列表中选择项

Question

创建了一个多选下拉列表，当我单击任何选项时，我有一个将值存储在文本框中的输入字段。当页面重新加载时 - 我想重新选择多选下拉列表中的值。文本框保留其值，因此我希望将其放在数组中时遍历它。

例如，文本包含："奶酪，莫扎雷拉奶酪">

重要的是只检查文本框中具有值的项目

Jquery：

document.getElementById("txt1").value = "cheese,mozarella";
var data =  document.getElementById("txt1").value;
var dataarray = data.split(","); //splits values (,)
console.log(dataarray);
var i;
for (i = 0; i < dataarray.length; i++) {       
}

.HTML：

<input type="text" runat="server" id="txt1" visible="true" value="0" /> 
<div class="container">
<select id="basic" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>

我有一个代码要演示：https://www.codeply.com/go/mCcxCM0vHs

我的目标是获取一些jquery代码来循环访问数据数组变量，并选中该值是否存在的框并勾选它。

Answer 1

此函数接收select和value，并将循环浏览select的选项，与给定的value进行比较，并将匹配选项标记为selected。

function prepopulateOptions(selectElement, value) {
var options = selectElement.options;
for (var i = 0, numberOfOptions = options.length; i < numberOfOptions; i++) {
if (options[i].value == value) {
options[i].selected = true;
}
}
}

此功能清除所有选定的选项。

function clearSelect(selectElement) {
var options = selectElement.options;
for (var i = 0, numberOfOptions = options.length; i < numberOfOptions; i++) {
options[i].selected = false;
}
}

然后调整脚本：

var data = "cheese,mozarella",
dataarray = data.split(","),
selectElement = document.getElementById('basic');
// clear select first
clearSelect(selectElement);
for (var i = 0; i < dataarray.length; i++) {
prepopulateOptions(selectElement, dataarray[i]); 
}

检查小提琴
使用jQuery可以更轻松地重写： https://jsfiddle.net/rtm0n53b/

Answer 2

使用 localStorage 和 jQuery。

<script type="text/javascript">
function fnLoadOptions(text){
//--clear selection
$('#basic option').prop("selected", false);
//--load selection
text = text||'';
var items = text.split(',');
for(var i in items) {
$('#basic option[value="'+items[i]+'"]').prop("selected", true);    
}
if($.fn.multiselect!=null) {
$('#basic').multiselect('refresh'); //--if using the bootstrap multiselect plugin, then refresh it.
}
}
var key = 'checkedOptions';
//--load previous selection
var previousSelection = localStorage.getItem(key);
fnLoadOptions(previousSelection);
$("#txt1").val(previousSelection);
//--bind to new selection      
$('#basic').change(function () {
var v = $('#basic').val();
$("#txt1").val(v);
localStorage.setItem(key,v);
});
$('#txt1').bind("keyup change",function () {
fnLoadOptions($(this).val());
});
</script>