表单之选择框的选项

1、获取单选选择框的选中项

//1. 获取选中项的索引
let selectedIndex = selectBox.selectedIndex;
//2.获取选中项
let selectedOption = selectBox.options[selectedIndex];
//3.输出选中项的索引、文本和值
console.log(`选中项的索引:${selectedIndex}`);
console.log(`选中项的文本:${selectedOption.text}`);
console.log(`选中项的值:${selectedOption.value}`);

2. 获取多选选择框的选中项

不同于单选,selectedIndex这个属性一旦在多选选择框中设置,那么即使已经选择了好几个选项,也会变成只有这个索引对应的选项被选中。
selected这个属性就不会发生这样的情况:
selectBox.options[0].selected = true;
把第一个选项选中,并不会影响其他选项的选择状态,因此,若要获得多选选择框的选中项,就要循环选项判断selected是否为true

function getSelectedOptions(selectbox){
  let result = [];

  for(let option of selectbox.options){
    if(option.selected){
      result.push(option);  
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。尽 管目前的 Web ...
    Xyaleo阅读 276评论 0 1
  • 1. 属性和方法 选择框由 和 共同组成。 1.1 除了前面所讲的表单控件的公共属性和方法外, 对应的Dom元素类...
    GucciFishAi前端阅读 505评论 0 1
  • 14.1 表单的基础知识 表单由 元素来表示,继承自HTMLElement类型,除具有HTML元素相同的默认属性外...
    Elevens_regret阅读 378评论 0 0
  • 本章主要介绍:表单、文本框验证与交互、使用其他表单控制。这一章会继续沿用上一章 封装的 EventUtil 对象(...
    了凡和纤风阅读 335评论 0 0
  • 在HTML中使用 和 元素创建选择框。而 元素对应的是 HTMLSelectElement 接口, ...
    海人为记阅读 752评论 0 0