I need a way to keep selected combobox values after page refresh-CodePudding

I have a number of comboboxes they all look like this:

<select name="cb1" size="1" id="kuz1" style="position:absolute;left:19px;top:96px;width:144px;height:69px;z-index:2;">
<option>Пусто</option>
</select>

then i obtain options for them from txt file using a simple js script.

I need a way to store selected information and keep it even if page is refreshed. I tried to use localstorage and cookie options, but they didn't work for some reason.

i tried to set variables like this var kuz1var=document.getElementById('kuz1').value;
but console always returns as "undefined"

I need somebody's advice to resolve this issue

Here is how i managed to obtain values for comboboxes

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script>
  $.get("мм.txt", function (data) {
    var lines = data.split('\n').map(function(line){
      return line.trim();
    });
    var select = $("select[name=cb1]")
    var optionCounter = 0;
    var currentGroup = "";
    lines.forEach(function(line){
      if(line.endsWith(" -")){
        currentGroup = line.substring(0, line.length - 2);
        optionCounter = 0;
        select.append("<optgroup id='"   currentGroup   "' label='"   currentGroup   "'>")
      } else if(line === ""){
        select.append("</optgroup>");
      } else {
        select.append("<option type='checkbox' id='" 
              (currentGroup   optionCounter)   "' name='" 
              (currentGroup   optionCounter)   "' value='" 
              line   "'>"   line   "</option>");
      }
    });
    console.log(lines);
  });
  </script>

CodePudding user response：

To store selected information and keep it even if the page is refreshed, you can use local storage. You can use the following code to save the selected value to local storage when the value changes and retrieve the value from local storage when the page is reloaded.

<script>
$.get("мм.txt", function (data) {
    var lines = data.split('\n').map(function(line){
        return line.trim();
    });
    var select = $("select[name=cb1]")
    var optionCounter = 0;
    var currentGroup = "";
    lines.forEach(function(line){
        if(line.endsWith(" -")){
            currentGroup = line.substring(0, line.length - 2);
            optionCounter = 0;
            select.append("<optgroup id='"   currentGroup   "' label='"   currentGroup   "'>")
        } else if(line === ""){
            select.append("</optgroup>");
        } else {
            select.append("<option type='checkbox' id='" 
                  (currentGroup   optionCounter)   "' name='" 
                  (currentGroup   optionCounter)   "' value='" 
                  line   "'>"   line   "</option>");
        }
    });

    // Get the selected value from local storage
    var selectedValue = localStorage.getItem("selectedValue");
    if (selectedValue) {
        select.val(selectedValue);
    }

    select.on("change", function () {
        // Save the selected value to local storage
        localStorage.setItem("selectedValue", select.val());
    });
    console.log(lines);
});
</script>

Regarding the undefined issue with var kuz1var=document.getElementById('kuz1').value;, make sure that the select element with id "kuz1" has finished loading before accessing its value. You can wrap it in a $(document).ready() function or place your script at the end of the body tag.