用于检查基于值 JS 的多选参数的文本框值

Question

尝试为复选框分配刻度，并在值与文本框中的值匹配时 select 编辑选项。这是一个多select参数。

例如如果页面刷新时文本框包含 1,2，我想确保 Cheese and Tomatoes 是 selected。如果文本框包含 1、5、6，那么我想确保 Cheese、Pepperoni 和 Onions 是 selected。如果文本框包含 1,2,3,4,5,6 那么我想确保所有复选框都是 selected.

正在尝试写一些 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>

当前，当页面刷新时，即使文本框已分配值 - 复选框已清除且没有任何 selected。我试图确保当用户 select 页面刷新时来自多参数的项目这些值没有消失并且仍然保留在页面上。

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

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

    },


});

Answer 1

首先，您必须在填充默认值后重新加载一次select，如下所示

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

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

最后，您正尝试将 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 的多选参数的文本框值

Textbox value to check multiselect parameter based on values JS

javascript

jquery

bootstrap-multiselect