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

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>

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

我的目标是获取一些jquery代码以遍历dataarray变量，然后选中该值是否存在并选中该框。

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>