`
xu520
  • 浏览: 83921 次
  • 性别: Icon_minigender_1
  • 来自: 金华
社区版块
存档分类
最新评论

JS实现用下拉框控制文本框的显示与隐藏?

 
阅读更多

下拉框中有内容,如A,B,C,当选A时文本框出现,当选B时,文本框消失,高手帮帮忙!

<select onchange="docuenmt.getElementById("文本框ID").style.display=this.selectedIndex==1)?'block':'none';" ....this.selectedIndex==1表示B项索引项



<title>控制文本框的显示隐藏</title>
</head>

<body>
<script language=javascript>
function Other_sel(CName,TextID)
{   
 if (document.FormName.CName.checked == true)
 {
  document.getElementById(TextID).style.visibility="visible";
 }
 else
 {
  document.getElementById(TextID).style.visibility="hidden";
 }
}
</script>   
<form action="" method="post" name="FormName">
<input type="checkbox" name="che" id="che" value="1" onclick="javascript:Other_sel('che','tex')" />其他 <input id="tex" name="tex" style="visibility:hidden;">
</form>

建立一个下拉列表框,其中有选项:有时间限制和无时间限制,选有时间限制时,在界面上显示一个文本域,可以输入时间限期,如选无时间限制,文本域不显示

if   (document.forms[0].ReviewWindow.selectedIndex=0) 
        document.forms[0].ReviewTime.style.visibility= "hidden "; 
    else   
        document.forms[0].ReviewTime.style.visibility   = "visible ";   

<div id= "L_Time " style= "visibility:hidden; "> <input type=text> </div>
<select onchange= "F_Select(this) "> </select>


<script>
function F_Select(select)
{
for(iIndex=0;iIndex <select.length;iIndex++)
{
if(select.options[iIndex].selected)
{
if(select.options[iIndex].value==1)
{
L_Time.style.visibility= " ";
}
else
{
L_Time.style.visibility= "hidden ";
}
}
}
}
</script>

分享到:
评论

相关推荐

    类ajax的带下拉框的文本框

    在IT领域,尤其是在Web开发中,"类Ajax的带下拉框的文本框"是一种常见的交互元素,它结合了Ajax技术与传统的下拉选择框,提供了更流畅、更高效的用户体验。这种文本框允许用户在输入时实时从服务器获取并显示匹配的...

    下拉框自动匹配文本框输入内容

    下拉框(Dropdown)与文本框(Input)的联动匹配通常应用于搜索、筛选或者选择项的场景,例如在填写表单时,用户输入部分内容后,系统会根据输入自动显示出相关的选项。 首先,我们需要了解HTML中的基础元素:`...

    文本框获取焦点弹出下拉框

    - 如果需要自定义样式和交互,可以使用CSS和JavaScript来控制下拉框的显示和隐藏、布局以及动画效果。 3. **JavaScript/jQuery实现**: - 当`&lt;input&gt;`元素获得焦点时,显示下拉框。例如,使用jQuery,可以编写...

    基于ASP.NET实现的可编辑的下拉框控件程序例子

    当用户通过下拉菜单进行选择后,选中的值会自动填充到文本框中,从而实现了下拉框与文本框之间的数据同步。 #### 3. 定制样式与用户体验 在代码中,我们还看到了对CSS样式的使用,如`position:absolute;`等,这是...

    下拉框的实现

    本文将探讨如何使用jQuery实现一个多选下拉框,并解决可能出现的位置不对和加载慢的问题。 首先,多选下拉框的基本结构通常包括一个文本框(TextBox)和一个隐藏的HTML控件(Hidden Field),用于存储选定的值。在...

    jquery实现Google自动下拉框

    ### 使用jQuery 1.3实现Google自动下拉框功能解析 #### 一、背景与目的 随着Web技术的发展,用户体验成为衡量网站质量的重要标准之一。其中,自动完成(Auto Complete)功能作为提升用户输入效率的有效手段,在众多...

    原生js text文本框模拟select下拉框美化点击下拉菜单选择value赋值效果源码.zip

    这个压缩包"原生js text文本框模拟select下拉框美化点击下拉菜单选择value赋值效果源码.zip"提供了使用JavaScript实现的一个例子,如何用原生JS将一个普通的text文本框模拟成一个美观的、可下拉选择的select框,并在...

    js select框美化用input文本框模拟select框美化特效

    本教程主要关注如何使用JavaScript和CSS来实现一个更加美观、交互性强的下拉框效果,通过将传统的`&lt;select&gt;`替换为`&lt;input&gt;`文本框来模拟,并在用户交互时展示二级菜单。 首先,让我们理解为什么要使用`&lt;input&gt;`...

    js text文本框弹出城市选择

    在JavaScript(JS)开发中,实现“js text文本框弹出城市选择”的功能是一项常见的交互设计,常见于各种在线服务,比如订机票、酒店预订等网站。这种功能为用户提供了一个友好的界面,允许他们在输入框中点击后弹出...

    vue实现select下拉显示隐藏功能

    今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,...代码实现 vue.js: //定义一个select下拉菜单 类型&gt; 表结构变更 value=tableChange&gt; &lt;el-option label=接口变更 va

    可以输入的下拉框(可用于项目的)

    - **组合使用**:将下拉框与文本输入框结合,形成一个可以输入的下拉框,这在JavaScript或前端框架中实现,如React、Vue、Angular等。 - **实现原理**:一般通过监听输入事件,当用户开始输入时,动态生成基于输入...

    两种方式生成可输入下拉框。

    通过JavaScript来控制下拉框的显示和隐藏,并处理用户的选择和输入: ```javascript function showSelect() { var selectBox = document.getElementById('selectBox'); if (selectBox.style.display === 'none') ...

    可编辑下拉框

    这段代码会在下拉框被点击时,替换为一个文本框,用户输入新值后,文本框失去焦点时,会将新值添加到下拉框选项并显示出来。 **3. CSS美化** 为了提供良好的用户体验,开发者还需要考虑可编辑下拉框的样式。这可能...

    jquery input下拉菜单选中效果特效代码

    本文将深入探讨如何使用jQuery实现一个input类型的下拉菜单,并展示选中效果。 首先,我们需要理解HTML中的`&lt;select&gt;`元素,它是创建传统下拉菜单的标准方式。然而,对于更高级的定制和交互,我们可能需要使用...

    JS Select下拉框(支持输入模糊查询)

    【JS Select下拉框(支持输入模糊查询)】 在网页开发中,`&lt;select&gt;`元素通常用于创建下拉框,但原生的HTML `&lt;select&gt;`元素并不支持输入模糊查询功能。为了实现这一功能,我们需要利用JavaScript来扩展和增强下拉框的...

    原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    总的来说,创建原生JavaScript日期时间插件涉及的关键知识点包括:JavaScript Date对象的使用,事件监听与处理,DOM操作,以及CSS样式控制。通过熟练掌握这些技能,我们可以构建出高效、灵活的日期时间选择功能,...

    HTML下拉框,下拉菜单源码

    然而,描述中提到的是“下拉菜单”,这可能指的是使用`&lt;ul&gt;`和`&lt;li&gt;`元素,配合CSS和JavaScript实现的自定义下拉菜单。这种下拉菜单可以提供更丰富的交互和设计灵活性。例如: ```html &lt;li&gt;&lt;a href="#"&gt;菜单项1 ...

    Extjs自定义带联想功能的下拉框

    在Web开发领域,特别是使用Extjs框架进行界面设计时,一个常见且实用的功能是实现类似搜索引擎输入框那样的联想提示功能。这种功能可以极大地提升用户体验,让用户能够更快地找到所需选项。本文将详细介绍如何在...

    layui当点击文本框时弹出选择框,显示选择内容的例子

    在本文中,我们将深入探讨如何使用layui框架在文本框被点击时弹出一个选择框,以便用户能够选择并显示相关内容。layui是一个轻量级的前端UI框架,它提供了丰富的组件和便捷的API,使得开发更加高效。以下是实现这一...

    jquery input文本框模拟select选择框获取选定

    总结来说,使用jQuery可以方便地将input文本框模拟成select选择框,实现与真实下拉框类似的功能。这主要通过动态操作DOM、添加事件监听器以及使用插件来完成。在实际项目中,根据具体需求选择合适的方法,并注重用户...

Global site tag (gtag.js) - Google Analytics