IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

关于JS获取select的值

PHP开发 2010-06-02 11:51:44 累计浏览 4,269 次
本机暂存

近日,在一项目中需要采用JS获取Select选择框所选中项的值,居然一下子忘记了如何获取。于是看了DOM文档,真觉得是自己老了,连这么简单的东西都忘记了。

为怕以后再忘记,也给同行一个提示,遂记录于此。

<select id="s1" name="s1">
<option selected="selected" value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>

操作一、获取所选择项显示的文字

document.getElementById(‘s1’).options[document.getElementById(‘s1’).selectedIndex].text

若当前选中“选项二”,则这种方式所取的结果为:选项二

操作二、获取所选择项的value

document.getElementById(‘s1’).options[document.getElementById(‘s1’).selectedIndex].value

若当前选中“选项二”,则这种方式所取的结果为:2

操作三、获取当前选择项

document.getElementById(‘s1’).selectedIndex

若当前选中“选项一”,则这种方式所取的结果为:1

这里对于select必须得有id属性,才能采用getElementById获取该控件,这点需要注意。

另外,对于PHP获取页面所提交的Select控件的值,需要Select控件得有name属性,在PHP内获取表单上的Select控件数据时,采用$s = $_POST[‘select的name属性值’];这种方式来获取。

怎么样? 其实很简单的吧,希望能给初学者一个启示!

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,266)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,268)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,805)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,764)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,689)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,245)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,146)
  8. 什么是全栈工程师? (累计阅读 13,948)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,641)
  10. 7 天打造前端性能监控系统 (累计阅读 11,103)