Получить выбранное значение каждого выбранного элемента и войти в консоль

Question

Моя функция ниже записывает одно значение в консоль вместо двух. В конечном счете, в моем проекте будет несколько элементов select, и мне нужно передать значение каждого элемента select через функцию.

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
  <select name="selecttype">
    <option value="0">choice 1</option>
    <option value="1">choice 2</option>
    <option value="" selected>N/A</option>
  </select>
</div>
<div class="choice">
  <select name="selecttype">
    <option value="0">choice 1</option>
    <option value="1">choice 2</option>
    <option value="" selected>N/A</option>
  </select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>

Javascript:

$("#logvalues").click(function() {
   $("option:selected").each(function(){
      console.log($("option:selected").val());
  });
})

Answer 1

Вам просто нужно передать текущий контекст, используя this, например:

$("#logvalues").click(function() {
  $("option:selected").each(function() {
    console.log( $(this).val() );
  });
})

Демо:

$("#logvalues").click(function() {
  $("option:selected").each(function() {
    console.log($(this).val());
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
  <select name="selecttype">
    <option value="0">choice 1</option>
    <option value="1">choice 2</option>
    <option value="" selected>N/A</option>
  </select>
</div>
<div class="choice">
  <select name="selecttype">
    <option value="0">choice 1</option>
    <option value="1">choice 2</option>
    <option value="" selected>N/A</option>
  </select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>