Значение текстового поля для проверки параметра множественного выбора на основе значений JS - PullRequest
Новая
       14

Значение текстового поля для проверки параметра множественного выбора на основе значений JS

0 голосов
/ 28 сентября 2018

Попытка назначить галочки для флажка и выбрать опции, если значение соответствует значениям в текстовом поле.Это параметр множественного выбора.

Например, если текстовое поле содержит 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, которая работает до сих пор.Это помещает значения в текстовое поле, когда вы выбираете элементы из выпадающего списка.Однако при обновлении страницы текстовое поле сохраняет эти выбранные значения, а параметр множественного выбора не : 

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

    },


});

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

вы можете сохранить входное значение в локальном хранилище, затем получить входное значение из локального хранилища, затем выполнить итерацию по набору параметров и установить для выбранного атрибута значение true для параметра, если значение присутствует в localstorage. 

<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>
0 голосов
/ 28 сентября 2018

Вы можете получить и заполнить значение, используя локальное хранилище, и разделить элемент.

Примечание Мне пришлось закомментировать локальное хранилище, чтобы демонстрационный код работал так, как локальное хранилище выиграло 'т работа междоменная.Вам нужно будет проверить это локально. 

$(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>
0 голосов
/ 28 сентября 2018

Во-первых, вы должны перезагрузить выбор один раз после заполнения значений по умолчанию, как показано ниже

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

Во-вторых, попробуйте использовать метод onInitialized, как описано здесь

Наконец, вы пытаетесь присвоить значения обратно от TextBox до Dropdown, как показано ниже, где вы пытаетесь присвоить значение как таковое запятой 1,2, которая на самом деле не существуетв качестве значения в dropdown.

Внешняя скрипта 

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