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

【问题标题】：Textbox value to check multiselect parameter based on values JS基于值JS检查多选参数的文本框值
【发布时间】：2018-09-28 18:50:34
【问题描述】：

如果值与文本框中的值匹配，则尝试将刻度分配给复选框并选择选项。这是一个多选参数。

例如如果页面刷新时文本框包含 1,2，我想确保选择 Cheese and Tomatoes。如果文本框包含 1、5、6，那么我要确保选择 Cheese、Pepperoni 和 Onions。如果文本框包含 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 功能。当您从下拉列表中选择项目时，这会将值放入文本框中。但是，当页面刷新时，文本框会保留这些选定的值，但多选参数不会：

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

    },


});

【问题讨论】：

在本地存储上设置您的值，当页面刷新时从本地存储中获取该值并根据本地存储值从下拉列表中选择值。
我已经更新了我的codeply。我试过这个，但不能让它工作。 codeply.com/go/rupzwTzBMY

标签： javascript jquery bootstrap-multiselect

【解决方案1】：

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

$('#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>

【讨论】：

@roa765，你用的是什么版本的多选？
Bootstrap-Multiselect.0.9.13
(2) ["1", "6"]0: "1"1: "6"length: 2__proto__: Array(0) 这是在控制台中 - 但仍选中所有框刷新
@roa765 你必须`$('#basic').multiselect('refresh');`在选择值后再次构建选择。检查我更新的答案，它可以工作。

【解决方案2】：

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

注意我不得不注释掉本地存储，这样演示代码才能工作，因为本地存储不能跨域工作。您需要在本地对此进行测试。

$(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>

【讨论】：

这不起作用，因为它失去了当前功能，当您选择一个项目时它会使用该值更新文本框，然后当页面重新加载时它应该重新选择这些值
@roa765 我想我知道你现在想要什么了。我还没有测试过这些，但我相信它应该根据需要获取和设置值。
对不起，这还没做。我从多选中选择选项 1,5。然后将该值存储在文本框中。刷新页面时，值 1,5 仍保留在文本框中，但是多选下拉列表中的所有值都已选中。不只是 1,5。

【解决方案3】：

您可以将输入值存储在本地存储中，然后从本地存储中获取输入值，然后迭代选项集，如果值存在于本地存储中，则将选定属性设置为选项的 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>

【讨论】：

这不起作用 - 我在我的页面上选择了项目 1,6。按下重新加载页面的按钮，列复选框消失，文本框仍然包含 1,6
不幸的是，这仍然不起作用。控制台显示之前选择的正确选项：和。文本框也显示 1,6 但多选参数已勾选所有选项。