<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>HTML标签</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 下拉框 -->
<select id="myselect">
<option value="1" >A</option>
<option value="2" >B</option>
<option value="3" selected >C</option>
</select>
<br />
<input id="mybtn" type="button" value="add" /><br />
<input id="mybtn2" type="button" value="change" /><br />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
下拉框是一个用处广泛和经常需要扩展的控件.
经常用来实现下拉选择,联动选择,下拉树等.
*/
/*
最简单的使用方法,如何获取下拉框的值
*/
var select = document.getElementById("myselect");
//select改变value事件
select.onchange = function(){
//选中的value
var val = this.value;
console.log(val);
//选中项的下标,注意是从0开始
var index = this.selectedIndex;
console.log(index);
//选中项的文本,这个获取的方法有点特别需要记住一下
var txt = this.options[index].text;
console.log(txt);
}
/*
这是最简单的使用方法,常常我们碰到的可能是需要动态是加载select的数据.
那怎么做呢,方法是有很多种的.
*/
//动态添加一项
var btn = document.getElementById("mybtn");
btn.onclick = function(){
//通过option对象动态添加,注意第一个参数是用来显示的文本,第二个参数是value
var item = new Option("D","4");
var select = document.getElementById("myselect");
//添加一项
select.options.add(item);
}
/*
点击按钮可以动态添加一项,但是貌似有点傻傻的.
如果我们有很多地方需要动态添加就比较累了,所以我们尝试简单封装一下.
*/
/*
分析一下:
1.它应该接收三个参数对吧,select对象,option的txt和value.
但是txt和value是可以相同的,那么至少两个.
2.动态添加是否应该验证一下,要添加的值是否已存在.
*/
var option = function(){
/*
验证要添加的选项value是否已存在
val:选项value
*/
function isExist(select,val){
var b = false;
for (var i = 0,len = select.options.length; i < len; i++){
var ov = select.options[i].value;
if (ov == val) {
b = true;
break;
}
}
return b;
}
/*
动态添加option
select:下拉框ele
val:选项value
txt:选项text
*/
function addItem(select,val,txt){
if(typeof select == "object" && val != null){
//验证是否已添加
var b = isExist(select,val);
if(!b){
//因为参数是动态的,还记得arguments吗?
//如果没有txt参数,那么txt = val
txt = arguments[2] || val;
//通过option对象动态添加,注意第一个参数是用来显示的文本,第二个参数是value
var item = new Option(txt,val);
if(select.options != null){
//添加一项
select.options.add(item);
return false;
}
else{
console.log("select参数不合法");
return false;
}
}
else{
console.log("选项已添加");
return false;
}
}
else{
console.log("参数不合法");
return false;
}
}
//公开方法
return {
isExist:isExist,
addItem:addItem
}
}();//注意这个括号,是指执行这个匿名函数.
var btn = document.getElementById("mybtn");
btn.onclick = function(){
var select = document.getElementById("myselect");
option.addItem(select,"4","D");//成功
option.addItem(select,"4","D");//已添加
option.addItem(select,"5");//成功
}
/*
封装好的option类,是全局的一个实例,随时都可以调用公开的两个方法.
这就是js单例模式的封装方法.一般用来封装一些工具类.
*/
/*
下拉框还能采用动态更新html的方法添加选项.
这里我们简单提一下.
*/
var btn2 = document.getElementById("mybtn2");
btn2.onclick = function(){
var html = [];
html.push('<option value="1" >足球</option>');
html.push('<option value="2" >篮球</option>');
html.push('<option value="2" >羽毛球</option>');
var select = document.getElementById("myselect");
//这样我们就可以更新select下面的全部option了.
select.innerHTML = html.join('');
}
/*
关于select还有其它一些常用的操作,简单介绍一下.
*/
var select = document.getElementById("myselect");
//设置默认选择项,设置selected=true,或者再html标签直接加上属性selected
select.options[1].selected = true;
//删除某一个选项,将某项的options设置为null.
//select.options[2] = null;
//清空全部选项
//select.options.length = 0;
/*
jquery时间.
*/
//获取选中项的值
var val = $("#myselect").val();
console.log(val);//2
//获取选中项的文本,这个跟想的不一样哦,不是直接$("#myselect").text();
var txt = $("#myselect option:selected").text();
console.log(txt);//B
//删除某一个选项
$("#myselect option").get(2).remove();
//清空全部选项
$("#myselect").empty();
/*
知识点:
1.获取select的显示文本,需要通过selectedIndex从options对象获取.
2.动态给select添加选项的两种方式.
3.js模仿单例模式封装方法.
4.select的其它常用操作.
5.介绍了使用jquery简单操作select.
*/
</script>
分享到：
相关推荐
这个"团队介绍html.zip"文件提供了一个HTML团队模板，适用于展示多人团队项目和个人介绍，帮助用户快速创建专业且吸引人的在线团队展示页面。PUDN（Programmers University Developer Network）是一个程序员和开发者...
在"程序猿炫酷个人介绍HTML源码"中，CSS3被用来实现丰富的视觉效果，比如渐变、阴影、过渡、动画等。例如，程序员可能使用了`transition`属性来创建平滑的元素状态变化，或者用`keyframes`定义动画序列，通过`...
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
3D 足球队队员介绍，这个是采用CSS3技术实现的效果，HTML5 CSS3三维效果，使用本实例中的效果，使用了googleapis，还自定义了超多的JS类库，以足球场为核心，显示各队员头像，单击头像可显示该运动员信息，并以前峰...
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
【企业介绍单页HTML模板】是一种专为展示企业信息而设计的网页模板，它基于流行的前端框架Bootstrap构建，提供了一种高效、快捷的方式来创建专业且吸引人的企业官方网站。Bootstrap是Twitter开发的一个开源工具，...
这个名为"html+js+css自我介绍"的项目，显然利用这三种语言创建了一个动态的个人简历展示页面，其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本，去除了短信注册接收验证码（当然也可以加），充值对接了Z支付个人...
本课程设计项目是一个基于HTML构建的游戏介绍网站，旨在教授学生如何使用HTML、CSS等前端技术来创建一个功能齐全、信息丰富的网页平台。这个网站能够展示各种游戏的信息，包括游戏简介、截图、攻略等内容，为用户...
适合向非IT人员讲解HTML5，也可向IT交流代码。主要内容是详细介绍HTML5更新内容，代码应用
2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言...
HTML5与CSS3在个人网页设计中的应用 - **HTML5**: 作为第五代的HTML标准，提供了更丰富的标签来支持多媒体内容，例如 `<video>` 和 `<audio>` 标签可以直接嵌入视频和音频，无需额外插件支持。此外，还引入了语义...
对于旅游景点介绍，可以利用CSS3创建吸引人的背景图像、滑动图片展示、地图定位等效果，提升用户体验。 3. JavaScript：JavaScript是前端开发的关键技术，用于实现网页的交互性。在这个项目中，JavaScript可能被...
它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对...
大学生静态网页设计期末作业川剧介绍的静态网页HTML源码带简单交互效果（必过） 一个关于川剧介绍的静态HTML网页，有着一些简单的交互效果,95分以上没问题啊，大作业必过，课程设计必过！ 大学生静态网页设计期末...
【旅游景区介绍网站html整站】是一个完整的网页设计项目，它专为展示旅游景区信息而构建，包含丰富的内容，可以直接应用于实际的在线平台。这个资源对于那些需要快速搭建旅游类网站的开发者来说非常实用，无需从零...
#### 3. **知识应用** - 在技术应用方面，该网页主要涵盖了以下知识点： - **Div + CSS布局**：网页使用Div元素实现布局，并通过CSS设置样式，使页面具有良好的视觉效果。 - **鼠标滑过特效**：通过CSS的`:hover...
### 使用HTML+CSS技术制作篮球明星介绍网站的关键知识点解析 #### 一、网站设计与制作题目解析 在标题“使用HTML+CSS技术制作篮球明星介绍网站”中，明确指出了本项目的主题是围绕篮球明星介绍来进行网站的设计与...
【HTML 介绍1】 HTML（HyperText Markup Language）是网页制作的基础，它是互联网上应用最广泛的语言，用于创建和设计网页。HTML 不仅仅是一种编程语言，而是一种标记语言，它通过一系列特定的标签来描述文档内容和...