Question

尝试将对勾分配给复选框，并在值与文本框中的值匹配时选择选项。这是一个多选参数。

例如如果页面刷新时文本框包含1,2，我想确保选择“奶酪和西红柿”。如果文本框中包含1,5,6，则我要确保选择了奶酪，意大利辣香肠和洋葱。如果文本框中包含1,2,3,4,5,6，那么我要确保选中所有复选框。

尝试编写一些JavaScript来做到这一点。我试图使用本地存储，但无法正常工作。请参见代码示例：https://www.codeply.com/go/rupzwTzBMY

ASPX：

<input type="text" runat="server" id="txt1" visible="true" value="" /> 

<div class="container">
    <select id="basic" multiple="multiple">
        <option value="1">Cheese</option>
        <option value="2">Tomatoes</option>
        <option value="3">Mozzarella</option>
        <option value="4">Mushrooms</option>
        <option value="5">Pepperoni</option>
        <option value="6">Onions</option>
    </select>
</div>

当前，当页面刷新时，即使文本框已分配值-复选框也将清除且未选择任何内容。我试图确保当用户刷新页面时从多参数中选择项目时，这些值不会消失并仍然保留在页面上。

到目前为止有效的Javascript功能。当您从下拉列表中选择项目时，这会将值放在文本框中。但是，当页面刷新时，文本框会保留这些选定的值，但multi-select参数不会：

 $('#basic').multiselect({
    onChange: function () {
        var selectedOptions = $('#basic').val();
        document.getElementById("txt1").value = selectedOptions;

    },


});

Answer 1

首先，您必须在填充以下默认值后重新加载选择一次

$('#basic').multiselect('refresh')

其次，尝试使用here所述的onInitialized方法

最后，您尝试按以下方式将值从TextBox分配给Dropdown，在这里您尝试用逗号1,2分配值，而实际上却没有在dropdown中不作为值存在。

External Fiddle

$('#basic').children("option[value=" +
document.getElementById("txt1").value + "]").prop("selected", true);

将值分别拆分为1和2，然后赋值即可。

$(document).ready(function () {

    document.getElementById("txt1").value = "1,2,3"

    $('#basic').multiselect({
            includeSelectAllOption: true,
            numberDisplayed: 5,
            onInitialized: function(select, container) {
                console.log("Init");
                selectListValues();
            }
        });
        
        $("#basic").multiselect('refresh');
});

function selectListValues()
{
    var txtValue = document.getElementById("txt1").value;
    var selectedValues = txtValue.split(",");
    
    for(var i = 0; i < selectedValues.length; i++)
    {
        var val = selectedValues[i];
        
        if (val == null || val == "") continue;
        
      $('#basic').children("option[value=" + val + "]").prop("selected", "selected");
    }
}

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
</head>
<body>


 <input type="text" runat="server" id="txt1" visible="true" value="" onchange="selectListValues()" /> 

<div class="container">
    <select id="basic" multiple="multiple">
        <option value="1">Cheese</option>
        <option value="2">Tomatoes</option>
        <option value="3">Mozzarella</option>
        <option value="4">Mushrooms</option>
        <option value="5">Pepperoni</option>
        <option value="6">Onions</option>
    </select>
</div>

</body>
</html>

Answer 2

您可以将输入值存储在本地存储中，然后从本地存储中获取输入值，然后对选项集进行迭代，如果本地存储中存在值，则将选项的选定属性设置为true。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<input type="text" runat="server" id="txt1" visible="true" value="" /> 
<div class="container">
    <select id="basic"  multiple>
        <option value="1">Cheese</option>
        <option value="2">Tomatoes</option>
        <option value="3">Mozzarella</option>
        <option value="4">Mushrooms</option>
        <option value="5">Pepperoni</option>
        <option value="6">Onions</option>
    </select>
</div>

<script>

$(document).ready(function () {

    $('#basic').multiselect({

        onChange: function () {
            var selectedOptions = $('#basic').val();
            console.log(selectedOptions);
            setInputAndLocatStorage();
        }
    });

     function onLoad() {
            if(!localStorage.getItem('selectedItems')) return false;

            var selItems = localStorage.getItem('selectedItems').split(',');
            document.getElementById('txt1').value = selItems.join(',');
             $('#basic').multiselect('select',selItems);
    }

    function setInputAndLocatStorage() {
            var selItems = $('#basic').val();
        var val = selItems == null ? '': selItems.join(',');
        document.getElementById('txt1').value = val;
        localStorage.setItem('selectedItems', val);
    }

     onLoad();
});
</script>

Answer 3

您可以使用本地存储获取并填充值，然后拆分项目。

注意我必须注释掉本地存储，以便演示代码可以正常工作，因为本地存储无法跨域工作。您将需要在本地进行测试。

$(function() {
  //$("#txt1").val(localStorage.getItem('topping'));
  var str = $("#txt1").val().split(",");
  $('#basic').val(str);
  
  $('#basic').on('change', function(){
    var list = $("#txt1").val($(this).val());
    //localStorage.setItem('topping', list);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" runat="server" id="txt1" visible="true" value="1,2,4" />

<select id="basic" multiple="multiple">
  <option value="1">Cheese</option>
  <option value="2">Tomatoes</option>
  <option value="3">Mozzarella</option>
  <option value="4">Mushrooms</option>
  <option value="5">Pepperoni</option>
  <option value="6">Onions</option>
</select>

用于根据值JS检查multiselect参数的文本框值

3 个答案: