时间戳

首页 > 解决方案 > 将复选框的javascript转换为选择类型

javascript - 将复选框的javascript转换为选择类型

问题描述

之前复选框的代码是

<li class="list-group-item">
       <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input common_check" value="<?= $row['Year']; ?>" id="Year"><?= $row['Year'];  ?>
        </label>
       </div>
  </li>

和用于获取过滤文本的 js 是

function get_filter(text_id)
{
  var filterData = [];
  $('#'+text_id+':checked').each(function(){
     filterData.push($(this).val());
   });
  return filterData;
}

现在，如果我想将其转为选择选项菜单栏

<option class="common_check" value="<?= $row['Year']; ?>" id="Year"><?= $row['Year'];  ?>

那么这个javascript应该是什么？

标签： javascripthtmlwebbackendweb-frontend

解决方案

有几件事你需要改变：

  1. 看起来您允许用户选择多个option. 为此，请确保multiple将属性分配给您的select元素。

  2. 将onchange处理程序添加到您的select

  3. 过滤所有选定的索引

<select id="mySelect" onchange="handler()" multiple>
   <option id="some-id" value="some-value"></option>
</select>


var filtered;
function handler() {
    const selector = document.getElementById('mySelect');
    const selected = Array.prototype.filter.call(selector.options, o => o.selected);
    filtered = selected.map(s => s.value);
}

每次更改选项（取消选择或添加选项）时，处理程序都会重新分配数组。这将节省您保持数组唯一性的工作，因为不必每次都检查数组以查看该值是否已经存在。

推荐阅读