网站首页 » 前端开发 » JavaScript » JavaScript 获取 Select 下拉框的值
上一篇:
下一篇:

JavaScript 获取 Select 下拉框的值

为什么这么简单的一个东西,我还得单独一篇文章记录下来?其实理由很简单,就是时刻提醒像我这种眼高手低的,基础知识不牢固的人,基础就是一切,基础可以创造一切。在做《Canvas 实现炫丽的粒子运动效果(粒子生成文字)》这个效果时,需要用到下拉框,来动态改变粒子运动效果。但尴尬的是,下拉框写好了却不知道怎么获取选中的值,于是网上找了下,并记录成文。

写好的HTML代码:

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 获取 Select 下拉框的值 - 云库前端</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>

<body>
<select class="back-dynamics" id="selectDynamics">
    <option value="spring">dynamics.spring</option>
    <option value="bounce">dynamics.bounce</option>
    <option value="forceWithGravity">dynamics.forceWithGravity</option>
    <option value="gravity">dynamics.gravity</option>
    <option value="easeInOut">dynamics.easeInOut</option>
    <option value="easeIn">dynamics.easeIn</option>
    <option value="easeOut">dynamics.easeOut</option>
    <option value="linear">dynamics.linear</option>
</select>
<button id="btn">打印选项的值</button>
</body>
</html>

没有瑕疵的下拉框已经有了,下面我们来通过 JavaScript 来获取下拉框选中的值。在这之前,我们可以先来看看下面这两代码执行后输出了什么内容:

JavaScript 代码
var select = document.getElementById("selectDynamics");
console.log(select.options);

获取 下拉框 select ,打印出这个 select 对象的 options 值,内容如下图:

内容为每个下拉框选择(option)、length、selectedIndex。其中selectedIndex 就是选中的 option 在 options 数组中的下标。当我们点开options 中其中的一个 option 对象时,你就会好像发现一块新大陆一样,属性之多,够你用了。selectedIndex 的值是实时被更新的,只要下拉框中有选项的更改。selectedIndex  的值都会自动更改成对应的 option 的下标。通过这个下标我们就可以很轻松地获取到选项中的值。

JavaScipt 代码
var select = document.getElementById("selectDynamics");
var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log(select.options);
    console.log("选项值为:" + select.options[select.options.selectedIndex].value);
    console.log("内容为:" + select.options[select.options.selectedIndex].innerText);
}

这样就可以获取了 select 下拉框的值及选中选项的内容了。如果还想获取其它属性,可以自己去看看 option 对象(select.options 中的 option)都为我们提供了些什么好东西。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-get-select-option-value/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END