get option values in array using map jquery

Question

$('#btnadd').click(addBulletinBoard);

function addBulletinBoard() {
  var show = $('#show').val();
  var show1;
  console.log("before " + $('#show').val())
  if (jQuery.inArray("*", show) !== -1) {
    show1 = $("select#show option").map(function() {
      return $(this).val();
    }).get();
  }
  console.log("after :" + show)
  console.log("after " + show1.splice(0, 2))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
  <option value="" selected="" disabled="">Select...</option>
  <option value="*">All</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>

I have a demo above. What I want to happened is when Selecting option from the select and the option ALL is among the selected. I want to get all option except the first one and the second. So I used map with splice. But as seen in the console it is not what I am expecting.

How to get option values except first two in jquery

score 1 · Answer 1 · answered Aug 20 '18 at 01:27

1

Can simply use Array#filter()

$('#btnadd').click(addBulletinBoard);

function addBulletinBoard() {
  var show = $('#show').val().filter(function(val) {
    return val && val !== '*'
  });

  console.log("after :", show)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
  <option value="" selected="" disabled="">Select...</option>
  <option value="*">All</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>

answered Aug 20 '18 at 01:27

charlietfl

170,828
13
121
150

I need to get all option values when I select/included among the selected the All. In your example when I only select All nothing is shown. Sorry must have missed that on the Question above – Manlapig Aug 20 '18 at 01:28
OK so if only ALL selected leave it in place? – charlietfl Aug 20 '18 at 01:29
No I mean if all is selected select all option except 0 and 1 index option. – Manlapig Aug 20 '18 at 01:31
Oh...so populate all the other values even if user didn't select them? – charlietfl Aug 20 '18 at 01:34
its like this. select only `all-> result is option 1 and option 2`, `select all and option 1 result is still option 1 and option 2`, `select all and option 2 result is still option 1 and option 2` – Manlapig Aug 20 '18 at 01:34
yes the main anchor is the option "All" selecting it will get all option. – Manlapig Aug 20 '18 at 01:35
And then remove `*` from results array? – charlietfl Aug 20 '18 at 01:36
Can chain the `filter()` to the `get()` – charlietfl Aug 20 '18 at 01:37
yes remove the blank and `*`. that is why I used splice(0,2) index 0 then 2 items. But what I get as result is index 0 and 1 which should be removed. Im clueless why – Manlapig Aug 20 '18 at 01:37
One simple way is use `gt()` selector `$("select#show option:gt(1)").map...` – charlietfl Aug 20 '18 at 01:45

score 0 · Answer 2 · answered Aug 20 '18 at 02:01

splice would return an array containing the deleted elements and change the original array. So console.log("after " + show1.splice(0, 2)) would show the deleted elements that is not what you really want. Simply move show1.splice(0, 2) out of console.log() and it works as what you expected.

$('#btnadd').click(addBulletinBoard);

function addBulletinBoard() {
  var show = $('#show').val();
  var show1;
  console.log("before " + $('#show').val())
  if (jQuery.inArray("*", show) !== -1) {
    show1 = $("select#show option").map(function() {
      return $(this).val();
    }).get();
    show1.splice(0, 2)
  }
  console.log("after :" + show)
  console.log("after :" + show1)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
  <option value="" selected="" disabled="">Select...</option>
  <option value="*">All</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>

get option values in array using map jquery

2 Answers2