1

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?

CodeIt
  • 3,492
  • 3
  • 26
  • 37
eL_
  • 167
  • 2
  • 17
  • 1
    Selecting multiple options vary in different operating systems and browsers. Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead. See [here](https://stackoverflow.com/questions/8641729/how-to-avoid-the-need-for-ctrl-click-in-a-multi-select-box-using-javascript) – CodeIt Jan 17 '18 at 14:24

2 Answers2

2

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>
Community
  • 1
  • 1
  • 1
    I'm pretty sure OP wants the value `all-items` to be a possible outcome of his select. Not a way to select everything. – Zenoo Jan 17 '18 at 14:17
  • Then he doesn't need to ask a question, he simply needs to return `all-item` like an option. –  Jan 17 '18 at 14:20
1

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>
Zenoo
  • 12,670
  • 4
  • 45
  • 69
  • 1
    @trichetriche For windows: Hold down the control (ctrl) button to select multiple options ; For Mac: Hold down the command button to select multiple options – CodeIt Jan 17 '18 at 14:19
  • :D Thank you @CodeIt, what doesn't work is clicking on "all". Not selecting several values. –  Jan 17 '18 at 14:20
  • 1
    @trichetriche it's not supposed to. `all-items` is a valid value for his select, as I understand it. – Zenoo Jan 17 '18 at 14:21
  • Then as I answered you, in this case there's no need for a question, just return the `all-item` value like it's any option. –  Jan 17 '18 at 14:21
  • @trichetriche The question was how to unselect anything else when `all-items` is selected. – Zenoo Jan 17 '18 at 14:23
  • After reading it ten times, I think I see the same thing as you. I will make an edit to my answer in this case ! Thank you for the clarification. –  Jan 17 '18 at 14:27
  • Wait, to do that you just have to click on all-items without holding ctrl, so yeah, I'm sticking to my original statement, you don't need to ask a question ! –  Jan 17 '18 at 14:29
  • @trichetriche It's always better to do it without holding ctrl. See [here](https://stackoverflow.com/questions/48302925/select-all-option-if-item-all-was-selected/48303069#comment83591352_48302925) – CodeIt Jan 17 '18 at 14:30