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比较，并将匹配的选项标记为{{1 }}。

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

检查小提琴
使用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>

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

2 个答案: