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

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

JavaScriptBlogXHTMLHTML工作 
阅读更多
有个小朋友不会写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>
分享到：
| EditText被键盘遮住的问题
评论
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;`元素用于...

Magicbox
Global site tag (gtag.js) - Google Analytics