JavaScript基础 下拉列表 点击按钮 显示当前选项的索引值

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

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,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

时间: 2024-10-17 23:30:30

JavaScript基础 下拉列表 点击按钮 显示当前选项的索引值的相关文章

javascript学习代码--点击按钮显示内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <

JavaScript点击按钮显示 确认对话框

//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My First Script</title> <script type=&q

JavaScript点击按钮显示确认对话框

//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My First Script</title> <script type=&q

点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

按钮点击显示隐藏层(再次点击按钮则隐藏层关闭): HTML部分: <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button> <div id="hidden" style="display:none">我是隐藏层.</div> JS部分: <script type='te

安卓TextView限定行数最大值,点击按钮显示所有内容

问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前三行?   2,textview在未完全渲染前无法拿到实际的属性. 解决思路: 写好布局文件,隐藏展开按钮 填充数据,判断数据是否塞满前三行 根据上一步的判断结果,选择隐藏和显示展开按钮 具体步骤: 布局文件此处省略,很简单只有一个TextView和一个Button,并设置Button隐藏. 首先,

js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>