JavaScript基础 下拉列表 点击按钮 显示当前选项的索引值
2017-05-06 17:17
761 查看
镇场诗:
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function () { var selectObj = document.getElementById("selBooks"); var book = ["道德经", "南华经", "北斗经"]; //开辟对应的内存空间 selectObj.length = book.length; for (var i = 0; i < book.length; i++) { selectObj.options[i].value = book[i]; selectObj.options[i].text = book[i]; } selectObj.selectedIndex = 0; } function ShowSelectedIndex() { var selectObj = document.getElementById("selBooks"); alert(selectObj.selectedIndex); } </script> </head> <body> <select id="selBooks" name="books"> <!--使用js创建option对象--> </select> <input type="button" onclick="ShowSelectedIndex()" value="显示当前选中的索引值"/> </body> </html>
result:
注:舍名利 喜欢看儒释道的书籍,所以举的不是普通例子,但效果都是一样的,还望能看得过去。
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。
注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。
相关文章推荐
- JavaScript基础 下拉列表 点击按钮 显示当前选项的索引值
- 表格点击当前行,在其下边展示其子信息列表(即下拉显示数据)
- javascript实现列表中点击删除按钮删除当前项
- 点击下拉列表,选项在文本框中显示
- JavaScript基础 下拉列表 使用js设置默认选中的选项 selectedIndex
- javascript实现下拉列表框显示(输入拼音头显示选项)
- JavaScript基础 下拉列表 使用js设置默认选中的选项 selectedIndex
- javascript 读取单选按钮、复选框以及下拉列表的当前值
- JavaScript基础 获得下拉列表中某一选项的值与id options[2].text options[2].value
- JavaScript基础 下拉列表 使用js创建option选项
- JavaScript基础 获得下拉列表中某一选项的值与id options[2].text options[2].value
- javascript 案例,显示一些按钮,如果点击了,当前点击的按钮文本变为“点了”,其他按钮文本变为“没点”
- JavaScript基础 下拉列表 使用js创建option选项
- [JavaScript] 动态生成下拉列表select的选项
- VC中点击ComboBox下拉列表不显示数据的解决方法
- VC中点击ComboBox下拉列表不显示数据的解决方法
- 黑马程序员之WinForm编程基础学习笔记:页面上有一张图片,默认是隐藏的,用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁则显示图片。
- javascript js 可上、下移动下拉列表选项
- Date Time Picker时间控件只能显示日期或时分秒,我怎么才能让它在界面上同时显示出两者,并且保证点击下拉按钮时可编辑日期? 2010-11-24 19:47
- 黑马程序员之WinForm编程基础学习笔记:用户在文本框1,2中输入两个数,点击按钮,在文本框3中显示从文本框1中的数字到文本框2中的数字之间的累加和。如果1或者2为错误的数据格式,则弹出对话框提示错