有个小朋友不会写js ,我只是在刚参加工作的时候写过一段时间,按照她的需求,从网上找了找,改了改,就成了下面的了,能运行的。
<!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-Type" content="text/html; charset=gb2312" />
<title>javascript获取下拉列表的值</title>
<script type="text/javascript">
function showValue(){
var cityid = document.getElementById("city").value;
alert(cityid);
changeBody(cityid);
return cityid;
}
function showText(){
var cityText = document.getElementById("city");
alert(cityText);
for(i= 0 ;i<cityText.length;i++){
if(cityText[i].selected == true){
alert(cityText[i].innerText);//这个在火狐浏览器中不支持
}
}
}
function gather(){
var pjValue = document.getElementById("pj").value;
var gatherValue = showValue() + " + "+ pjValue
alert("----------"+gatherValue)
}
function changeBody(index){
alert(index);
switch(index){
case "1":{
document.getElementById('div1').style.display = "";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
break;
}
case "2":{
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "";
document.getElementById('div3').style.display = "none";
break;
}
case "3":{
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "";
break;
}
default:{
document.getElementById('div1').style.display = "";
document.getElementById('div2').style.display = "";
document.getElementById('div3').style.display = "";
break;
}
}
}
</script>
</head>
<body style="text-align:center">
<p>JavaScript获取下拉列表的值</p>
<p>
<select id="city" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">重庆</option>
<option value="6">南京</option>
<option value="7">杭州</option>
</select>
</p>
文本:<input type="text" id="pj" value=""/>
<br>
<div style="display :none" id="div1"> hello this is div1</div>
<div style="display :none" id="div2">hello this is div2</div>
<div style="display :none" id="div3">hello this is div3</div>
<br>
<input type="button" value="看看选的value" onclick="showValue()" ></button>
<input type="button" value="看看选的Text" onclick="showText()"/>
<br>
<input type="button" value="拼凑url" onclick="gather()"/>
<p>
<div id="showChoise" ></div>
</p>
</body>
</html>
分享到:
相关推荐
第一步:将表单中的select隐藏起来。 为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的。所以把它杀掉。 第二步:用脚本找到select标签在网页上的绝对位置。 我们在那个位置上用DIV标签做个假的、...
**问题:**如何让一个`DIV`隐藏起来,如何让一个`DIV`显示出来? **解析:**可以通过修改CSS的 `display` 属性实现。例如: ```javascript // 隐藏 document.getElementById('myDiv').style.display = 'none'; //...
此外,使用JavaScript操作文件上传控件与文件预览也会占用客户端资源,需注意对页面性能的影响。 ### 结语 JSP页面中通过点击图片弹出文件上传界面并实现预览的实例,展示了如何利用前端技术与JSP后端技术相结合,...
排版标记包括`<div>`和`<span>`,它们用于组织和控制页面布局。`<div>`常用于创建大的容器,`<span>`则用于对行内元素进行操作。 5. **字体标记** 字体标记如`<b>`(粗体)、`<i>`(斜体)、`<u>`(下划线)等,...
<!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width,initial-scale=... 这是一个j购物车商品累加结算效果,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网。
比如在描述一个宠物小精灵时,我们可以用`<h1>`标签来创建一个主要标题,如"宠物小精灵世界",用`<p>`标签添加描述,例如"在这里,每个训练家都有自己的宝可梦伙伴,他们一起探索、战斗,成为最好的朋友。...
3. **js** 或 **javascript** 目录:存放JavaScript代码,这些代码负责网页的交互功能,如表单验证、动态效果和API通信。 4. **images** 目录:存储网页中使用的图像资源,如图标、背景图片等。 5. **fonts** 目录:...
通过JavaScript,我们可以访问和操作DOM,改变页面内容、样式或行为。 10. **浏览器兼容性**:不同的浏览器对HTML、CSS和JavaScript的支持程度可能有所不同,开发者需要关注并解决跨浏览器兼容性问题。 在...
"1092-1A-demo-409410197"可能是一个关于HTML基础知识的教学资源,涵盖了HTML文档结构、元素、属性、表格、表单以及CSS和JavaScript的基本概念。通过学习和实践这个示例,初学者可以更好地理解和掌握如何创建具有...
此外,一个完整的网站项目可能还会包含CSS(层叠样式表)和JavaScript文件,它们分别负责页面的视觉样式和交互功能。CSS使用选择器来定位HTML元素并应用样式规则,而JavaScript可以动态修改HTML和CSS,实现响应式...
10. JavaScript集成:虽然标签主要涉及静态内容,但现代网页常常集成JavaScript(通过`<script>`标签)以实现动态效果和交互功能。JavaScript可以操作DOM(文档对象模型),改变HTML元素的属性、内容或样式。 通过...
首先,"q_web"项目显然是一个关于网页开发的项目,可能是一个网站、一个网页应用或者是一个交互式的网页设计案例。"q-writer"则可能是用于编写或编辑HTML代码的工具,类似于基本的文本编辑器,但专为网页开发设计,...
- `<header>`和`<footer>`用于页面头部和尾部。 - `<nav>`定义导航链接。 - `<section>`和`<article>`用于组织内容区块。 - `<aside>`定义与主要内容相关的辅助信息。 - `<video>`和`<audio>`元素支持多媒体内容。 ...
在这个名为"Goit-Markup-HW-05"的学习任务中,我们聚焦于HTML(HyperText Markup Language)这一核心技术,它是...完成这个任务将有助于提升Web开发者的专业技能,并为后续学习CSS、JavaScript和其他前端技术做好准备。
每个标签都有其特定的用途,如`<div>`用于创建块级元素,`<span>`用于创建内联元素,`<ul>`和`<li>`组合用于无序列表,`<ol>`和`<li>`则用于有序列表。 【HTML属性】 HTML标签可以拥有属性,属性为标签提供额外...
8. 页面布局:使用<div>元素进行页面分块,通过CSS控制元素的布局,实现流式、网格或相对定位布局。 9. 表单元素:学习如何创建用户输入表单,包括文本输入()、密码输入()、选择框(<select>)、复选框()和...
`<div>`和`<span>`元素是无语义的容器,通常用于CSS布局和JavaScript操作。 4. **HTML表格**:`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)用于创建数据表格。 5. **HTML表单**:`<form>`元素用于...