Question

0

97

Views

set attribute 'selected' to selected options on select list multiple

I have a list established as multiple, I want that when selecting one or more options to be able to establish the 'selected' attribute to each of the selected options, if any of them is deselected remove the 'selected' attribute from that option, this can be done alone with pure javascript?

var selects = document.querySelectorAll('select');

    for (const select of selects) {
        const options = select.options,
            selected_options = select.selectedOptions,
            multiple = select.hasAttribute('multiple');
        select.addEventListener('change', function(ele) {
            if (multiple) {
                // Here should be the event for the multiple list, I can't do it.
            } else {
                for (i = 0; i < options.length; i++) {
                    const option = options[i];
                    Array.prototype.filter.call(option.parentNode.children, function () {
                        if(option.selected) {
                            option.setAttribute('selected', 'selected')
                        } else {
                            option.removeAttribute('selected')
                        }
                    })
                }                   
            }
        })
    }

<select name="second" class="form-select" aria-label="Second select example" id="selectSecond">
    <option selected>Open this select menu</option>
    <option value="a">One A</option>
    <option value="b">Two B</option>
    <option value="c">Three C</option>
</select>

<select name="third[]" class="form-select" aria-label="Third select example" id="selectThird" multiple>
    <option selected>Open this select menu</option>
    <option value="a1">A One</option>
    <option value="a2">A Two</option>
    <option value="a3">A Three</option>
    <option value="a4">A Four</option>
    <option value="a5">A Five</option>
    <option value="a6">A Six</option>
</select>

I hope I have explained myself well and you can help me. Thanks in advance. Kind regards.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T06:28:28.121Z

I test it work fine , can you respond to any problems encountered?

var selects = document.querySelectorAll('select');

for (const select of selects) {
  const options = select.options,
        selected_options = select.selectedOptions,
        multiple = select.hasAttribute('multiple');
  select.addEventListener('change', function(ele) {
    if (multiple) {
      for (var i = 0; i < options.length; i++) {
        const option = options[i];
        if(option.selected) {
          option.setAttribute('selected', 'selected')
        } else {
          option.removeAttribute('selected')
        }
        console.log(option.text,option.getAttribute('selected'));
      }
    } else {
      for (i = 0; i < options.length; i++) {
        const option = options[i];
        Array.prototype.filter.call(option.parentNode.children, function () {
          if(option.selected) {
            option.setAttribute('selected', 'selected')
          } else {
            option.removeAttribute('selected')
          }
        })
      }                   
    }
  })
}

<select name="second" class="form-select" aria-label="Second select example" id="selectSecond">
    <option selected>Open this select menu</option>
    <option value="a">One A</option>
    <option value="b">Two B</option>
    <option value="c">Three C</option>
</select>

<select name="third[]" class="form-select" aria-label="Third select example" id="selectThird" multiple>
    <option selected>Open this select menu</option>
    <option value="a1">A One</option>
    <option value="a2">A Two</option>
    <option value="a3">A Three</option>
    <option value="a4">A Four</option>
    <option value="a5">A Five</option>
    <option value="a6">A Six</option>
</select>