整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JavaScript 设置和控制下拉菜单

拉菜单的属性

length 表示选项<option>的个数

selected 布尔值,表示选项<option>是否被选中

SelectedIndex 被选中的选项序号,如果没有被选中则为-1,对于多选下拉菜单而言,返回被选中的第一个选项序号。从0开始计数

text 选项的文本(它是option专有的属性)

value 选项的value值

type 下拉菜单的类型。单选返回select-one,多选返回select-multiple

options 获取选项的数组，列如oSelectBox.options[2]表示下拉菜单oSelectBox中的第3项

访问选中项

下拉菜单(单选):

<html>
<head>
<title>下拉菜单，单选</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //获取选中项
    alert("您选中了" + oSelectBox.options[iChoice].text); //下拉菜单，单选
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看选项" />
</form>
</body>
</html>

下拉菜单(多选):

<html>
<head>
<title>下拉菜单，多选</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍历整个下拉菜单
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被选中
aChoices.push(oSelectBox.options[i].text); //压入到数组中,可以用于单选的情况;
alert("您选了：" + aChoices.join()); //输出结果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看选项" />
</form>
</body>
</html>

通用的访问下拉菜单选中项的方法:

<script language="javascript">
function getSelectValue(Box){ //Box参数select标签的ID值
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.elements[Box]; //根据参数相应的选择下拉菜单
    if(oSelectBox.type == "select-one"){ //判断是单选还是多选
    var iChoice = oSelectBox.selectedIndex; //获取选中项
    alert("单选，您选中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices = new Array();
    //遍历整个下拉菜单
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被选中
    aChoices.push(oSelectBox.options[i].text); //压入到数组中
    alert("多选，您选了：" + aChoices.join()); //输出结果
    }
}
</script>

函数使用方法:

<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看选项" />

添加、替换、删除选项

通过构造函数Option()直接添加value、text等信息，相当方便

var oOption = new Option(text,value,defaultSelected,selected)

defaultSelected为布尔型值:1(true)设置下拉式表单默认值,

selected为布尔值:1(true)表示被选中

最后两项默认值为0,如果不希望添加的选项被默认选中则可以忽略,添加选项时通常将<select>列表的第length项直接设置为新的选项,即在末尾增加。

添加选项：

<html>
<head>
<title>添加选项</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加选项，参数为<select>标签的ID值
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption; //在菜单末尾添加选项
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球类：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">篮球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>

替换选项

如果下拉菜单中的序号为已经存在了的选项,添加时则会自动替换原有的选项

oBox.options[iNum]=oOption;//替换iNum个选项

<html>
<head>
<title>替换选项</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替换选项,参数Box为<select>的ID值,iNum为替换的选项序号;
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替换第iNum个选项
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球类：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">篮球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="篮球替换为乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>

添加选项到具体位置

<html>
<head>
<title>添加到具体位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球类：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">篮球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>

以上代码IE7中虽然在正确的位置插入了选项,但内容却没有显示出来(bug问题)

兼容性更好的代码,使用方法与以上相同;

<script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    //兼容IE7，先添加选项到最后，再移动
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

注意：IE9已经解决了bug问题

删除下拉菜单的选项:

删除下拉菜单中的某个选项时相对最简单的,只需要将这个选项设置为null即可

bBox.options[iNum]=null;

天遇到个来咨询利用原生的JS代码来修改HTML代码的的童鞋，耐心的给这个童鞋做了解答后，然后整理了一下测试代码，写成文章记录一下，方便以后有同需求的站长们。

目标需求

HTML原始代码

<form action="" method="post" class="form">
 <input id="mm" type="text" >
 <input id="mochu" type="text" onclick="act(this.value)" />
 <input id="mc" type="text" >
</form>

目标要求：

利用JS代码将以上HTML代中的 id 为 mochu 的 input 中的 cnclick 属性去掉

<input id="mochu" type="text" onclick="act(this.value)" />

换成

<input id="mochu" type="text" />

解决方案

利用 JS中dom对象的 outerHTML 属性，可以轻松的解决这个问题

outerHTML：设置或获取对象及其内容的 HTML 形式

例：JS获取元表本身的HTML代码

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form action="" method="post" class="form">

<input id="mm" type="text" value="飞鸟慕鱼博客" >

<input id="mochu" type="text" onclick="act(this.value)" value="http://www.feiniaomy.com" />

<input id="mc" type="text" >

</form>

<script>

var html = document.getElementById('mochu').outerHTML;

console.log(html);

</script>

</body>

</html>

打印结果：

例：js修改指定元素的本身的HTML代码

通上面的例子，可以知道 outerHTML 属性可以获取到元素本身的HTML代码，既然可以获取也能设置或修改元素本身的代码

代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
 <input id="mm" type="text" value="飞鸟慕鱼博客" >
 <input id="mochu" type="text" onclick="act(this.value)"/>
 <input id="mc" type="text" >
</form>
<script>
 var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
</script>
</body>
</html>

运行结果如图所示

补充说明

以下是与 outerHTML 功能相似的属性，下一篇文章会详细说明一下他们的作用与区别

innerHTML:设置或获取对象起始标签和结束标签之间的内容。

innerText:设置或获取位于对象起始和结束标签内的文本

outerHTML:设置或获取对象及其内容的 HTML 形式

outerText:设置或获取对象的文本

、表单：

网页仅有表单才能接收用户输入信息、并将信息提交到服务器进行处理。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、制作规范的表单

<form name="表单名称" method="提交的方式:get|post" action="处理表单的服务器地址">

一系列的表单对象

提交按钮:<input type="submit" value="提交" name="sum" />

</form>

注意：表单必须要有提交按钮,作用:当点击提交钮时，会自动将表单中的数据提交到表单action属性所指定的地址进行处理.

三、定义表单对象

1.使用input标签定义表单对象

<input type="元素类型" name="表单对象名称" value="表单对象的值">

1.1 type的类型:

text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)

submit(提交按钮)、reset(重置按钮)、file(文件域)、button(按钮)、

image(图片域：具备提交按钮)、hidden(隐藏域)、

date(日期控件:html5新增的)、number(数字调节器:html新增的)

2.使用select标签定义下拉列表

<select name="sel">

<option value="项值">项文本</option>

<option value="研究生">研究生</option>

<option value="本科">本科</option>

....

</select>

3.使用textarea定义文本域:

<textarea cols="80" rows="8">请输入内容</textarea>

四、常用表单对象的属性

1.文本框:

<input type="text" name="uname" value="Admin" maxlength="最大字符数:15" size="文本框长度:10" readonly="只读:readonly"/>

2.设置单选框和复选框的默认选中

checked="checked"属性

3.使用selected属性设置下拉列表的选中项

<option value="本科" selected="selected">本科</option>

来自网络

五、css(Cascading style sheet):级联（层叠）样式表。

1.作用：修饰html标签

2.优势：

内容与表现分离；

网页的表现统一，容易修改；

丰富的样式，使得页面布局更加灵活；

减少网页的代码量，增加网页的浏览速度，节省网络带宽；

运用独立于页面的CSS，有利于网页被搜索引擎收录。

六、在html文档添加css样式的方法。

1.行内样式：使用标签的style属性添加样式

<标签 style="一系列的样式规则">

样式规则的格式:样式属性:样式属性值;

2.内部样式:使用style标签定义样式

<style type="text/css">

一系的样式选择器(选择器必需先定义，后引用)

</style>

注意：通常情况style标签放在head标签中。

2.1基本选择器分类：类选择器、Id选择器、标签选择器

2.2使用类选择器

定义类选择器

.类选择器名{一系列样式}

引用类选择器:使用标签的class属性引用类选择器名称

2.3使用Id选择器

定义id选择器

#id选择器名{一系列样式规则}

引用ID选择器:使用标签的ID属性引用ID选择器名称

2.4定义标签选择器

标签名称{一系列样式规则}

引用标签选择器:当使用该标签时自动套动标签样式

3.外部样式:

外部样式是将一系列样式选择器定义在外部样式文件（**.css）中

3.1在网页使用link标签引用外部样式文件

<link href="index.css" type="text/css" rel="stylesheet" />

七、样式优先级（就近原则）

行内样式>内部样式>外部样式

id选择器>类选择器>标签选择器

八、高级选择器(复合选择器)

1.层选选择器

1.1后代选择器

定义后代选择器

选择器1 选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且选择器存在层次关系

1.2子选择器

定义子选择器

选择器1>选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且选择器存在父子关系

1.3相邻兄弟选择器

定义相邻兄弟选择器

选择器1+选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且相邻的

1.4通用相邻兄弟选择器

定义通用相邻兄弟选择器

选择器1~选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且相邻之后的所有兄弟

2.交集选择器

定义交集选择器

标签选择器类选择器|id选择器

使用：使用标签的同时还引用类或者id选择器

3.并集选择器

定义并集选择器

选择器1,选择器2

使用：使用选择器1 或者 选择器2 都行

九、span标签

文本标签，由内容决定自身大小。


在线咨询
上一篇：图片轮播的实现：HTML+CSS+ JavaScript
下一篇：以优雅的方式实现HTML表格的拖拽和排序功能-Table-draagger

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 太原 黟县 竹山县 阳城县 郧西县 竹溪县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服