今天突然想做个
下拉菜单响应动态创建节点文本框的js代码，其实并不是太难
很轻松的便做了出来，但是每次下拉菜单内容变换，去都是在body后面添加子文本框，所以声明了一个count变量，用来计数，以下附上html的测试代码
<html>
<head>
<title>test js</title>
</head>
<body>
<select name="char" id="test" onchange="abc()">
<option value="">-choose-</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<script>
var count=0;
function abc () {
count++;
var xxx = document.getElementById("test").value;
if(xxx=="aaa"&&count==1){
var dhy1 = document.createElement("input");
dhy1.type="text";
document.getElementsByTagName("body")[0].appendChild(dhy1);
}else if((xxx=="bbb"||xxx=="ccc")&&count==1){
var dhy2 = document.createElement("input");
var dhy3 = document.createElement("input");
dhy2.type="date"; dhy3.type="date";
document.getElementsByTagName("body")[0].appendChild(dhy2)
document.getElementsByTagName("body")[0].appendChild(dhy3);
}else{
alert("加载完成!");
}
}
</script>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架，它提供了丰富的组件和API，使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
在创建无限下拉菜单时，我们需要通过DOM来获取或创建菜单元素，如`<ul>`和`<li>`，并动态插入子菜单项。可以使用`document.createElement()`创建新元素，`element.appendChild()`添加子元素，`element.removeChild()...
在ASP.NET Web应用中，可能还需要使用CSS来控制菜单的样式，以及JavaScript或jQuery来实现下拉菜单的动态行为，如展开和折叠子菜单。 7. **异步加载**： 对于大型数据集，考虑使用异步加载技术，只有在用户展开...
4. 动态赋值：根据业务需求，可能需要动态加载或更新树形下拉菜单的数据。可以调用`tree.render`方法再次渲染树，传入新的数据源。 5. 获取选中值：当用户选择树形菜单中的某个节点后，可以通过监听`click`事件来...
2. **DOM操作**：JavaScript需要操作HTML DOM元素来创建和更新下拉菜单。这包括动态生成和删除DOM节点，以及添加事件监听器以响应用户的点击行为。 3. **事件处理**：当用户点击某个菜单项时，需要触发相应的事件，...
通过深入研究"非常小巧的JS下拉菜单代码"这个项目，开发者可以学习到如何用JavaScript构建高效且具有良好用户体验的下拉菜单，同时了解如何处理跨浏览器兼容性问题，提升自己的前端开发技能。这个代码实例是一个很好...
"jQuery树形多级下拉菜单"就是这样一款实用的代码资源，它允许开发者创建具有无限嵌套级别的二级下拉菜单，为网站的菜单系统增添了层次感和交互性。 一、jQuery库的介绍 jQuery是一个高效、简洁的JavaScript库，它...
在本案例中，我们关注的是MooTools中的动态下拉菜单（Dropdown）实现，这是一个常见且实用的功能，尤其对于网页导航和表单设计来说至关重要。 动态下拉菜单是指在用户操作（如鼠标悬停或点击）时能够动态显示或隐藏...
最后，“OICQ菜单效果”可能指的是模仿即时通讯软件OICQ（现称QQ）的下拉菜单样式，这类菜单通常具有快速操作和反馈的特点，可以使用JavaScript实现点击后显示快捷选项。 以上各种JavaScript菜单特效都是通过结合...
总结，Ajax搜索下拉菜单提示js源代码是结合Ajax和JavaScript实现的一种动态搜索功能，通过监听用户输入、发送Ajax请求、处理返回数据并动态更新页面内容，提高了搜索的效率和用户体验。理解并掌握这些知识点，有助于...
当涉及到多级树型结构时，JS（JavaScript）的运用可以创建出既美观又功能强大的下拉菜单。本篇文章将深入探讨如何利用JS实现漂亮的多级树型下拉菜单，并分享一些关键的技术要点。 首先，我们要理解树形结构的本质。...
无限极下拉菜单是一种常见的网页交互设计，常用于网站导航或层级数据展示，例如在电商网站的...具体实现过程中，需要注意菜单项的递归结构、事件处理、动画效果以及响应式设计，以创建出用户体验良好的无限级下拉菜单。
在创建下拉菜单时，我们需要找到或创建相应的DOM节点，如菜单项和子菜单，并调整它们的样式以控制显示和隐藏。 2. **事件监听**：为了响应用户的点击行为，我们需要在触发元素上添加事件监听器。常见的事件包括`...
1. **DOM操作**：JavaScript通过DOM（文档对象模型）来操作HTML元素，创建一个日历界面需要动态地添加和修改DOM节点。 2. **事件监听**：当用户点击或选择日期时，需要监听对应的事件，如`click`事件，然后执行相应...
在这篇文章中，我们将介绍如何使用JavaScript来动态设置select下拉菜单的默认选中项。这个过程对于Web开发人员来说是非常常见的需求，尤其是在需要根据不同的条件来显示不同的下拉菜单选项时。 首先，我们需要了解...
在前端开发中，有时我们需要创建交互式的用户界面，例如当用户点击输入框时显示一个下拉菜单供选择。zTree 是一个广泛使用的 JavaScript 库，它专门用于构建可定制的树形菜单。在这个场景中，我们将详细探讨如何利用...
总之，理解和掌握树形菜单和目录式下拉菜单的设计原理与实现方法，对于创建用户友好的界面和提升软件系统的易用性至关重要。这些文档和示例将为学习者提供宝贵的参考资料，帮助他们深入理解这两种菜单类型，并能够在...
JavaScript 树形下拉菜单是一种常见的用户界面元素，它允许用户通过展开和折叠节点来浏览层级结构的数据。这种菜单在网站导航、文件管理器、组织结构展示等方面有广泛应用。本项目利用HTML、JavaScript和CSS这三种...
“带弹性的”则意味着这个树形下拉菜单具有一定的可扩展性，可以根据数据量和用户的交互动态调整大小。这可能涉及到JavaScript库或者CSS的弹性布局（Flexbox）来实现。例如，当用户展开一个节点，菜单会自动适应以...
综上所述，这个“模拟select点击显示下拉菜单”的示例涉及了使用CSS3进行样式控制和效果实现，以及利用JavaScript进行用户交互和动态内容的处理。开发者可以参考这个案例来学习和应用到自己的项目中，提升网页的用户...