CODEWITHSUNDEEP
javascriptjquerycsshtml
eL_
eL_

Reputation: 177

Select all option if item-all was selected

I have something like this:

<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

What I need:

  1. After init only "All" is selected (done).
  2. If the customer selected other options, "all-items" should be unselected.
  3. If the customer has select e.q 2 options and after that will select "all-item", an only first option should be select and another should be unselected.

I tried to do it like that:

$("#all-item").on('focus', function() {
    $("#selecty option").each(function(){
       $(this).attr("selected", "selected");
    });
});
<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

but doesn't work. Anybody can help?

Upvotes: 1

Views: 1133

Answers (2)

user4676340
user4676340

Reputation:

I made it with vanilla JS, because you don't need JQuery for that :

function handleChange(element) {
  if(element.value === 'all-item') {
    const options = [...element.options];
    for (let opt of options) {
      if (opt.value !== '' && opt.value != 'all-item') { opt.selected = true; } 
      else { opt.selected = false; }
    }
  }
}
option {
  padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
  <option value="">Chose an option</option>
  <option value="all-item">All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

EDIT

To unselect every other option :

function handleChange(element) {
  if(element.value === 'all-item') {
    const options = [...element.options];
    for (let opt of options) {
      if (opt.value === 'all-item') { opt.selected = true; } 
      else { opt.selected = false; }
    }
  }
}
option {
  padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
  <option value="">Chose an option</option>
  <option value="all-item">All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 2

Zenoo
Zenoo

Reputation: 12880

You can simply check if all-item is selected with .is(':selected') when the user selects anything, and unselect anything else with .attr('selected',false) :

$('select').on('change',function(){
  if($('option[value="all-item"]',this).is(':selected')){
    $('option:not([value="all-item"])',this).attr('selected',false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 1

Related Questions