`
bz5811
  • 浏览: 33022 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

(转帖)实现选择下拉框后 下面的页面根据选择的选项变化

 
阅读更多

转帖,主要内容来自http://bbs.csdn.net/topics/260016106

 

最近在做html5项目,主要是模仿surveymonkey做一个简单的调查问卷系统。本来以为会用到这个——通过选择下拉框来使下面的页面变化。但是后来发现由于做的比较简单,这个看起来是多此一举了。还是设计比较重要,如果早想好的话,也不用浪费一个上午。

 

这里记录下这个方法,以备后用。

 

<script> 
function cll(id){ 
    if(id==1){ 
         eval("div1.style.display=\"\";"); 
         eval("div2.style.display=\"none\";");} 
   else{ 
         eval("div2.style.display=\"\";"); 
         eval("div1.style.display=\"none\";");} 
} 
</script> 
<select   name="state"   onChange="cll(this.value)">   
    <option   value="0">no</option>   
    <option   value="1">yes</option>     
</select>
<BR>   
<BR> 
<div id="div1"> text1 </div> 
<div id="div2"> text2 </div> 

 以下是另外一种div隐藏和显示的方法,两种方法加起来就全了

<html>
<body>
<script>

function show(){
document.getElementById("div").style.display="";
//alert(document.getElementById("div").style.display)
}
function hidden(){
document.getElementById("div").style.display="none";
//alert(document.getElementById("div").style.display)
}
</script>
<BODY>
<input name="name" type="button" onClick="show();" value="显示">
<div id="div" style="display: none" onMouseout="hidden();">
show it
</div>
</BODY>
</HTML>

 

分享到:
评论

相关推荐

    用下拉框实现页面跳转

    "用下拉框实现页面跳转"这个主题就涉及到了如何利用JavaScript技术来增强用户界面的交互性,使得用户可以通过选择下拉框中的不同选项,自动跳转到相应的页面。下面我们将深入探讨这个知识点。 首先,我们来理解...

    jsp实现连动下拉框

    连动下拉框通常用于需要根据一个选择器的选择结果动态改变另一个选择器内容的情况,例如在用户选择了一个国家后,自动更新城市列表等场景。 ### JSP 实现连动下拉框的核心知识点 #### 1. 理解 JSP 的基本概念 JSP...

    选择不同的下拉框跳到不同的页面

    选择不同的下拉框跳到不同的页面,使用JavaScript实现的下拉框跳到不同页面效果!

    JavaScript 实现连动下拉框

    本文将详细介绍 JavaScript 实现连动下拉框的方法,包括确定数据格式、根据传入的数组创建选项列表、在设置选项之前清空原有选项、设置提示选择项和默认选择项等。 确定数据格式是实现连动下拉框的第一步。首先,...

    UiPath选择下拉框.docx

    以上就是通过UiPath实现Web页面下拉框自动选择的完整步骤。在实际操作中,可能还需要考虑异常处理、等待时间的设置以及与其他UiPath活动的集成,例如数据的读取与写入、条件判断等,以确保整个流程的稳定性和效率。...

    WPF颜色选择下拉框

    本主题将深入探讨如何实现一个“WPF颜色选择下拉框”,它是一个允许用户从一系列预设颜色中选择的下拉框控件,类似于WinForm中的背景颜色选择功能。我们将讨论如何自定义颜色选项、设置控件属性以及编写相应的XAML和...

    纯前端实现下拉框.zip

    下面我们将深入探讨下拉框的实现原理、使用jQuery进行交互以及前端选择下拉框的设计与优化。 一、下拉框的基础知识 下拉框在HTML中由`&lt;select&gt;`元素表示,通常与`&lt;option&gt;`元素配合使用,以展示可供选择的选项。...

    js实现下拉框选择要显示图片的方法

    在本例中,当用户从下拉框中选择一个选项时,`onChange`事件被触发,事件处理器会根据所选选项的值,来更新`&lt;img&gt;`标签的`src`属性,从而改变图片的显示。 具体实现步骤如下: 1. 准备一张或多张需要显示的图片,...

    使用bootstrap实现多选下拉框

    在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...

    html-jquery多语言选择下拉框

    在页面加载时,我们可以根据这个信息预选下拉框中的语言选项: ```javascript var browserLanguage = navigator.language || navigator.userLanguage; var defaultOption = $('#language-select option[value="' + ...

    下拉框值触发另一个下拉框

    例如,当用户在第一个下拉框中做出选择时,我们可以发送一个AJAX请求到服务器,获取与之相关的第二个下拉框的选项数据,然后动态渲染到页面上: ```javascript fetch('api/relatedOptions?selectedValue=' + this....

    asp.net可输入可选择下拉框

    在ASP.NET开发中,下拉框(DropdownList)是一种常见的数据输入控件,通常用于提供一组预定义的选项供用户选择。然而,随着用户界面的需求不断升级,传统的下拉框可能无法满足所有场景,比如用户可能希望在下拉框中...

    JS实现下拉框多项选择

    这段代码会在用户选择或取消选择选项时更新控制台中的已选值。你可以根据实际需求修改这部分逻辑,例如更新DOM上的文本或触发其他业务逻辑。 **2. 使用jQuery实现** 如果你的项目中已经引入了jQuery,可以利用其...

    用WPF实现多选下拉框

    在Windows Presentation Foundation (WPF) 中,创建一个支持多选功能的下拉框(ComboBox)是一种常见的需求,尤其是在用户界面设计中需要用户提供多个选项时。本文将深入探讨如何利用WPF来实现这样的功能。 首先,...

    随着下拉框的改变 下拉框的值也在同步变化

    js实现通过改变下拉框的值,输出相应的下拉框的value

    jquery 实现下拉框左右选择

    本文将深入探讨如何使用jQuery实现一个下拉框左右选择的功能,这是一个常见于用户界面设计中的交互元素,通常用于选项筛选或数据迁移。 首先,我们需要理解下拉框左右选择的基本概念。这种设计通常包含两个部分:...

    最简单的下拉框联动不刷新页面示例

    在网页开发中,下拉框联动是一种常见的交互设计,它允许用户在选择一个下拉框选项后,另一个相关的下拉框会自动更新其内容,而无需整个页面进行刷新。这种功能提高了用户体验,减少了不必要的数据传输,加快了页面...

    基于bootstrap做的地域选择下拉框.zip

    4. **交互友好**:Bootstrap的JS插件可能被用来增强下拉框的交互性,例如通过点击或输入触发下拉选项的显示和隐藏,或者实现级联选择效果。 5. **无障碍性**:遵循Web无障碍标准,确保视力障碍或其他障碍的用户也能...

    Qt 实现颜色下拉框

    主要思路是: 1. 继承 QComboBox ,利用 Qtablewidget 实现下拉板内容的实现;...将 Qpushbutton 背景颜色作为被选择颜色,且自定义了 MyPushButton,用以传出背景色; 3. 实现当前色的保存和颜色回选。

    使用javascript实现下拉框的动态控制

    资源名称:使用Javascript实现下拉框的动态控制   内容简介: 使用Javascript实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用,便于 操作者从…组选项...

Global site tag (gtag.js) - Google Analytics