javascript - 获取从 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'];

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

标签： javascriptphpjqueryhtmlarrays

Answer 1

这里有很多问题，例如不匹配的变量名称 ( selecetedMonthsand selectedMonths)、jQuery 选择器中的拼写错误、:selecetedJs 中缺少右括号、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>