`
serryzhao
  • 浏览: 116318 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

帮个小朋友凑了个页面,关于js操作 select 和隐藏div的

阅读更多
有个小朋友不会写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> 

分享到:
评论
3 楼 serryzhao 2010-09-20  
jl580650 写道
对于select的操作,建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了


刚才闲着没事 按照你的方法重写了 showText() 函数如下

function showText(){   
 var cityText = document.getElementById("city");   
 alert(cityText[cityText.selectedIndex].innerText);      
} 


2 楼 serryzhao 2010-09-20  
jl580650 写道
对于select的操作,建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了


不错,受教。谢谢
1 楼 jl580650 2010-09-20  
对于select的操作,建议还是通过option
http://304288612.iteye.com/blog/297893
看看这个就可以了

相关推荐

    用javascript模拟select达到美化效果

    第一步:将表单中的select隐藏起来。 为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的。所以把它杀掉。 第二步:用脚本找到select标签在网页上的绝对位置。 我们在那个位置上用DIV标签做个假的、...

    php程序员面试题(含html、JavaScript、php和mysql)

    **问题:**如何让一个`DIV`隐藏起来,如何让一个`DIV`显示出来? **解析:**可以通过修改CSS的 `display` 属性实现。例如: ```javascript // 隐藏 document.getElementById('myDiv').style.display = 'none'; //...

    jsp中点击图片弹出文件上传界面及实现预览实例详解

    此外,使用JavaScript操作文件上传控件与文件预览也会占用客户端资源,需注意对页面性能的影响。 ### 结语 JSP页面中通过点击图片弹出文件上传界面并实现预览的实例,展示了如何利用前端技术与JSP后端技术相结合,...

    HTML语言学习教程——HTML语言剖析[参照].pdf

    排版标记包括`&lt;div&gt;`和`&lt;span&gt;`,它们用于组织和控制页面布局。`&lt;div&gt;`常用于创建大的容器,`&lt;span&gt;`则用于对行内元素进行操作。 5. **字体标记** 字体标记如`&lt;b&gt;`(粗体)、`&lt;i&gt;`(斜体)、`&lt;u&gt;`(下划线)等,...

    购物车商品累加结算效果.zip

    &lt;!... &lt;... &lt;head&gt; ...meta charset="UTF-8"&gt;...meta name="viewport" content="width=device-width,initial-scale=... 这是一个j购物车商品累加结算效果,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网。

    宠物小精灵

    比如在描述一个宠物小精灵时,我们可以用`&lt;h1&gt;`标签来创建一个主要标题,如"宠物小精灵世界",用`&lt;p&gt;`标签添加描述,例如"在这里,每个训练家都有自己的宝可梦伙伴,他们一起探索、战斗,成为最好的朋友。...

    EATZA2

    3. **js** 或 **javascript** 目录:存放JavaScript代码,这些代码负责网页的交互功能,如表单验证、动态效果和API通信。 4. **images** 目录:存储网页中使用的图像资源,如图标、背景图片等。 5. **fonts** 目录:...

    jsGloAcademy

    通过JavaScript,我们可以访问和操作DOM,改变页面内容、样式或行为。 10. **浏览器兼容性**:不同的浏览器对HTML、CSS和JavaScript的支持程度可能有所不同,开发者需要关注并解决跨浏览器兼容性问题。 在...

    1092-1A-demo-409410197

    "1092-1A-demo-409410197"可能是一个关于HTML基础知识的教学资源,涵盖了HTML文档结构、元素、属性、表格、表单以及CSS和JavaScript的基本概念。通过学习和实践这个示例,初学者可以更好地理解和掌握如何创建具有...

    domuki-main.github.io

    此外,一个完整的网站项目可能还会包含CSS(层叠样式表)和JavaScript文件,它们分别负责页面的视觉样式和交互功能。CSS使用选择器来定位HTML元素并应用样式规则,而JavaScript可以动态修改HTML和CSS,实现响应式...

    CPI-Lab.github.io

    10. JavaScript集成:虽然标签主要涉及静态内容,但现代网页常常集成JavaScript(通过`&lt;script&gt;`标签)以实现动态效果和交互功能。JavaScript可以操作DOM(文档对象模型),改变HTML元素的属性、内容或样式。 通过...

    q_web:网页 q-writer

    首先,"q_web"项目显然是一个关于网页开发的项目,可能是一个网站、一个网页应用或者是一个交互式的网页设计案例。"q-writer"则可能是用于编写或编辑HTML代码的工具,类似于基本的文本编辑器,但专为网页开发设计,...

    opsta-web

    - `&lt;header&gt;`和`&lt;footer&gt;`用于页面头部和尾部。 - `&lt;nav&gt;`定义导航链接。 - `&lt;section&gt;`和`&lt;article&gt;`用于组织内容区块。 - `&lt;aside&gt;`定义与主要内容相关的辅助信息。 - `&lt;video&gt;`和`&lt;audio&gt;`元素支持多媒体内容。 ...

    goit-markup-hw-05

    在这个名为"Goit-Markup-HW-05"的学习任务中,我们聚焦于HTML(HyperText Markup Language)这一核心技术,它是...完成这个任务将有助于提升Web开发者的专业技能,并为后续学习CSS、JavaScript和其他前端技术做好准备。

    test

    每个标签都有其特定的用途,如`&lt;div&gt;`用于创建块级元素,`&lt;span&gt;`用于创建内联元素,`&lt;ul&gt;`和`&lt;li&gt;`组合用于无序列表,`&lt;ol&gt;`和`&lt;li&gt;`则用于有序列表。 【HTML属性】 HTML标签可以拥有属性,属性为标签提供额外...

    Coding-School-Projects

    8. 页面布局:使用&lt;div&gt;元素进行页面分块,通过CSS控制元素的布局,实现流式、网格或相对定位布局。 9. 表单元素:学习如何创建用户输入表单,包括文本输入()、密码输入()、选择框(&lt;select&gt;)、复选框()和...

    company_proj

    `&lt;div&gt;`和`&lt;span&gt;`元素是无语义的容器,通常用于CSS布局和JavaScript操作。 4. **HTML表格**:`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)用于创建数据表格。 5. **HTML表单**:`&lt;form&gt;`元素用于...

Global site tag (gtag.js) - Google Analytics