时间戳

首页 > 解决方案 > 获取每个 Select 元素的选定值并记录到控制台

javascript - 获取每个 Select 元素的选定值并记录到控制台

问题描述

我下面的功能是将一个值记录到控制台而不是 2 个值。最终我的项目将有多个选择元素，我需要通过一个函数传递每个选择元素的值。

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());
  });
})

标签： javascriptjquery

解决方案

您只需要使用以下方式传递当前上下文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>

推荐阅读