获取从 HTML 到 javascript 数组的选定选项（onchange）

Question

我想获取 javascript 的选定选项，然后使用选项文本创建数组。

这就是我现在所做的：

 function selectMonthOnChange(month) {
    var selectedMonths = [];
    var selMonths = $('#sel_Months option:selected');
    
    $(selMonths).each(function(k) {
        selectedMonths.push(month.options[k].text);
    });
    console.log(selectedMonths);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple ">
    	<option value="1 ">Jan</option>
      <option value="2 ">Feb</option>
      <option value="3 ">Mar</option>
      ...
      <option value="12 ">Dec</option>
</select>

我想要输出（例如，取决于所选月份）：

['Feb', 'May', 'Dec'];

我知道，我在做一些愚蠢的事情，答案非常简单:) - 天哪，我应该休息一下......

Answer 1

这里有很多问题，例如变量名称不匹配（selecetedMonths 和 selectedMonths），jQuery 选择器 :seleceted 中的拼写错误，Js 中缺少右括号，HTML 中多余的双引号和本机和 jQuery 方法的一般混搭。

为了简化这一点并改进逻辑，您应该使用不显眼的事件处理程序，而不是过时的 on* 事件属性。然后你可以简单地使用map() 来创建一个包含所选选项的文本数组，如下所示：

$(function() {
  $('#sel_months').change(function() {
    var arr = $(this).find('option:selected').map(function() {
      return $(this).text();
    }).get();

    console.log(arr);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel_months" multiple="multiple">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>

Answer 2

1. 你在 jquery 脚本中关闭每个循环时犯了错误
2. 您在选择的 ID 上犯了一些错误。 id=""sel_months" 而不是 id=""sel_months"
3. 您控制台错误的变量。

此代码将为您提供帮助。

 function selectMonthOnChange(month)
{
      var selecetedMonths = [];
      var selMonths = $('#sel_months option:selected');
      $(selMonths).each(function(k)
      {
         selecetedMonths.push(month.options[k].text);   
      }); 
  console.log(selecetedMonths);
}

Answer 3

您选择的 ID 似乎有一些拼写错误。 id=""sel_months" 而不是 id=""sel_months"（一个 " 就足够了）。

另外，你需要选择正确的 id，也许你错过了这个，或者打错了它（sel_months）

这是一个有效的解决方案，在那里实施。 How to get all selected values from <select multiple=multiple>?

let selectElement = document.getElementById('sel_months')
let selectedValues = Array.from(selectElement.selectedOptions)
    .map(option => option.value);

Answer 4

每个结束标签也有问题，其他变量也有问题：

演示： https://codepen.io/creativedev/pen/VdMmYy

HTML

<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="12">Dec</option>
</select>

JS

function selectMonthOnChange(month)
{
      var selecetedMonths = [];
      var selMonths = $('#sel_months option:selected');
//console.log(selMonths)
      $(selMonths).each(function(k)
      {
         selecetedMonths.push(month.options[k].text);   
      }); 
  console.log(selecetedMonths);
}

Answer 5

您有一些语法和格式问题。除此之外，代码正在运行：

function selectMonthOnChange(month) {
  var selectedMonths = [];                              // misspelled `selected`
  var selMonths = $('#sel_months option:selected');     // misspelled `selected`

  selMonths.each(function(k) {
    selectedMonths.push(month.options[k].text);
  })                                                    // missing `)`
  console.log(selectedMonths);
}

此外，您需要在 HTML 中删除 "：

<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">

function selectMonthOnChange(month) {
  var selectedMonths = [];
  var selMonths = $('#sel_months option:selected');

  selMonths.each(function(k) {
    selectedMonths.push(month.options[k].text);
  })
  console.log(selectedMonths);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="12">Dec</option>
</select>