Javascript-форум - Поместить в local.storage выбранный option из select.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Поместить в local.storage выбранный option из select. (https://javascript.ru/forum/events/36780-pomestit-v-local-storage-vybrannyjj-option-iz-select.html)

Поместить в local.storage выбранный option из select.

Добрый день!

Есть селект, нужно выбранный элемент селекта поместить в хранилище, а при перезагрузке страницы из хранилища делать этот option выбранным.

http://jsfiddle.net/DenimTornado/9Haha/ вот всё, что смог сделать, div там для примера. Писать значение не в див надо, а именно делать выбранным элемент селекта.

Заранее, спасибо!

<select id="count" name="user_type">
    <option value="1">1</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">5</option>
</select>
<script>
(function(){
    var select = document.querySelector('#count');
    if (localStorage.selectedIndex !== undefined) {
        select.selectedIndex = localStorage.selectedIndex;
    }
    select.onchange = function() {
        localStorage.selectedIndex = this.selectedIndex;
    }
})()
</script>

То, что надо! Спасибо огромное!

... а как например можно сохранить значение нескольких selecto'в с разными id !?

<select id="abc">
    <option value="1">1</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">5</option>
</select>
<select id="cde">
    <option value="1">1</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">5</option>
</select>
<script>
(function(){
    var selects = document.querySelectorAll('select');
    for (var i = 0, select; select = selects[i]; i++) {
        if (localStorage[select.id] !== undefined) {
            select.selectedIndex = localStorage[select.id];
        }
        select.onchange = function() {
            localStorage[this.id] = this.selectedIndex;
        }
    }
})()
</script>

Здравствуйте.
А как тоже самое проделать с несколькими чекбоксами со своими id которые не объединены общей группой ?

Цитата:

Сообщение от trio

А как тоже самое проделать с несколькими чекбоксами со своими id ?

у вас же код 5 поста перед глазами!!! сделайте замену в строках 17,20,23

выделяются сразу все, не совсем то

<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<input type="checkbox" id="check3">

(function(){
    var check = document.querySelectorAll('input');
    for (var z = 0, checkid; checkid = check[z]; z++) {
        if (localStorage[checkid.id] !== undefined) {
            checkid.checked = localStorage[checkid.id];
        }
        checkid.onchange = function() {
            localStorage[this.id] = this.checked;
        }
    }
})()

trio,
добавьте + в строки 9 и 12 (тут это 5 и 8)

(function(){
    var check = document.querySelectorAll('[type="checkbox"]');
    for (var z = 0, checkid; checkid = check[z]; z++) {
        if (localStorage[checkid.id] !== undefined) {
            checkid.checked = +localStorage[checkid.id];
        }
        checkid.onchange = function() {
            localStorage[this.id] = +this.checked;
        }
    }
})()

О!
Это же совсем другое дело!
Благодарю!

возможность Multiselect

Цитата:

Сообщение от danik.js (Сообщение 285897)

<select id="abc">
    <option value="1">1</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">5</option>
</select>
<select id="cde">
    <option value="1">1</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">5</option>
</select>
<script>
(function(){
    var selects = document.querySelectorAll('select');
    for (var i = 0, select; select = selects[i]; i++) {
        if (localStorage[select.id] !== undefined) {
            select.selectedIndex = localStorage[select.id];
        }
        select.onchange = function() {
            localStorage[this.id] = this.selectedIndex;
        }
    }
})()
</script>

Приветствую!
А какой будет код, если у нас 3 select-а и 2 из них должны быть multiselect?

localStorage сохранение выбраных option

budda555,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

</head>

<body>
<select class="abc">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select class="abc" multiple="multiple" size="5">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select class="abc" multiple="multiple" size="5">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<script>
(function(){
    const selects = document.querySelectorAll('select.abc');
      let selected = JSON.parse(localStorage.selected || "[]");
      [...selects].forEach((select, i) => {
      select.onchange = function() {
          let {selectedOptions} = select;
          selectedOptions = [...selectedOptions].map(({index})=> index);
          selected[i] = selectedOptions;
          localStorage.selected = JSON.stringify(selected)
        }
       const selectedOptions = selected[i]||[];
       [...select.children].forEach((option, i) => option.selected = selectedOptions.includes(i))
     })
})()
</script>
</body>
</html>

рони,
Браво!