使用地图jQuery获取数组中的选项值

时间:2018-08-20 01:19:09

标签: javascript jquery html-select splice

$('#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>

我上面有一个演示。我要发生的事情是当从选择中选择选项并且选择ALL时。我想获得除第一个和第二个以外的所有选项。所以我使用了带拼接的地图。但是从控制台中看到的不是我所期望的。

如何获取jquery中前两个除外的选项值

2 个答案:

答案 0 :(得分:1)

可以简单地使用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>

答案 1 :(得分:0)

splice将返回包含已删除元素的数组,并更改原始数组。因此console.log("after " + show1.splice(0, 2))会显示出删除的元素,这并不是您真正想要的。只需将show1.splice(0, 2)console.log()中移出,它就可以按照您的预期工作。

$('#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>