`

Jquery动态添加元素--简单样例

jQueryJavaScriptHTML 
阅读更多

今天同事问了个问题：

写道
知道怎么写js实现这个功能么？
在select中，选择1，在select后面出现一个文本框
选择2， 在select后面出现一个select
这个文本框和select名字一样，只能出现一个

这样子

 

对于这种需求，想必大家都遇到过，也都解决过。

给同事写了个简单样例，顺手贴出来，算是随笔吧，也为以后书写js方面的资料开个头，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../jslib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	//Jquery动态添加元素--简单样例
	$(function() {
		$("#xselectop").change(function() {
			var $xaddElement = $("#xaddElement");
			var xtext = "<input type='text' name='xtest' value='xtext'/>";
			var xselect = "<select name='xtest'><option value='1'>-----</option><option value='1'>文本框</option><option value='2'>下拉框</option></select>";
			
			var opval = this.value;
			if("1" == opval) {
			    $xaddElement.empty();
				$xaddElement.append(xtext);
			} else if("2" == opval) {
				$xaddElement.empty();
				$xaddElement.append(xselect);
			}
		});
	});
</script>
</head>
<body>
	<select id="xselectop">
		<option value="1">-----</option>
		<option value="1">文本框</option>
		<option value="2">下拉框</option>
	</select>
	<div id="xaddElement"></div>
</body>
</html>

 

分享到：
| 第五讲：WEB项目-集成Flex3+BlazeDS3.2+S ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 样例及特效介绍

    本教程将基于提供的"JQueryDemo"、"JqueryTabTest"、"JQueryTest"以及"JQuery特效"样例和效果，深入探讨jQuery的核心特性和常见应用。** ### 1. jQuery 的引入与基础用法 在HTML文件中，可以通过`&lt;script&gt;`标签...

    jquery-easyui-1.8

    《jQuery EasyUI 1.8 实现样例详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它为开发者提供了一系列轻量级、易于使用的组件，以帮助快速构建功能丰富的 Web 应用程序。EasyUI 的核心思想是通过简单的 HTML ...

    JQuery菜单样例

    这个菜单样例是为初学者准备的，旨在帮助他们快速理解和掌握jQuery在创建用户界面元素时的应用。 首先，我们要了解菜单的基本结构。一个菜单通常由一系列链接或按钮组成，这些链接或按钮按层次排列，可展开和收缩，...

    50 个jquery 样例 附源码

    9. **响应式设计**：jQuery 可以结合现代前端框架（如Bootstrap）实现响应式布局，动态调整页面元素以适应不同设备的屏幕尺寸。 10. **与原生JavaScript的互操作**：jQuery 能与原生JavaScript无缝集成，允许开发者...

    鼠标拖动divjquery-ui-1.11.0.rar

    通过查看源代码，你可以了解如何使用jQuery UI的API来初始化可拖动元素，以及如何自定义拖动行为，例如设置限制拖动范围、添加拖动时的视觉反馈等。这将提升你对前端开发中交互设计的理解和实践能力。

    jquery iviewer jquery图片查看工具（放大、缩小、旋转、可二次开发）

    接着，选择一个图片元素，通过jQuery选择器选中，然后调用iViewer方法初始化。例如： ```html &lt;!DOCTYPE html&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery iViewer 示例 &lt;script src="path/to/jquery.min.js"&gt; ...

    jquery mobile datepicker 手机端日期选择器

    通过调用$.fn.datebox()方法，可以为指定元素添加日期选择器功能。此外，该插件还支持多种模式，如日历模式、滑动模式等，满足不同的日期选择需求。 `jquery.mobile.datebox.i18n.zh-CN.utf8.js`则是国际化的语言包...

    JQuery UI Dialog使用样例

    首先，为表单元素添加验证规则，然后在提交时检查有效性。 ```javascript $("#dialogForm").validate({ rules: { inputField: "required", }, messages: { inputField: "This field is required", }, ...

    jquery里uploadify的样例代码 文件上传

    以下是一个基本的样例代码： ```javascript $(document).ready(function () { $('#fileUploader').uploadify({ 'swf': 'uploadify/uploadify.swf', // SWF文件路径 'uploader': 'uploadify/uploadify.php', // ...

    jQuery省市区三级联动插件city-picker

    然后，为需要展示省市区三级联动的select元素添加特定的class，如`cp-cities`： ```html &lt;select class="cp-province"&gt; &lt;select class="cp-city"&gt; &lt;select class="cp-district"&gt; ``` 最后，初始化city-picker插件...

    jQuery-mydm.zip

    例如，使用jQuery可以一行代码就完成元素的选择、隐藏显示、添加删除类等操作，而这些在原生JavaScript中则需要编写较多的代码。jQuery还提供了丰富的插件系统，如滑动效果、轮播图、下拉菜单等，让开发者能够快速...

    jQuery分页插件（实例详尽，简单易用

    jQuery分页插件主要是通过JavaScript和CSS来实现的，它利用jQuery库的强大功能，动态生成分页链接，并根据用户点击的页码加载相应的内容。核心原理包括以下几个步骤： 1. 数据处理：首先，你需要将所有数据加载到...

    jQuery动态分页数据获取代码.zip

    jQuery动态分页数据获取代码就是解决这一问题的工具，它允许开发者通过简单的API调用来实现高效且交互良好的分页效果。 该压缩包中的"jQuery动态分页数据获取代码"可能包含了一个名为`paging`的插件，这个插件可能...

    jquery弹出悬浮插件webui-popover特效源码.zip

    在Web开发中，交互性和用户体验是至关重要的元素，而jQuery库以其强大的功能和易用性在前端开发领域占据着重要地位。本篇文章将深入探讨一个基于jQuery的弹出悬浮插件——WebUI-Popover，该插件为网页添加了丰富的弹...

    jQuery dialog对话框插件点击弹出对话框代码

    jQuery dialog对话框插件是jQuery UI库中的一个核心组件，用于创建可自定义的模态或非模态对话框。这个插件提供了丰富的功能，包括拖动、调整大小、自动定位以及多种主题样式，使开发者能够轻松地在网页中添加交互式...

    h5视频播放器样例

    为了自定义这些控件，我们可以使用JavaScript或者jQuery来监听和处理事件，比如`play`、`pause`、`ended`等。 CSS样式在`h5视频播放器样例`中扮演着关键角色，允许开发者根据自己的需求定制播放器外观。这包括但不...

    一个类似163邮箱标签tab的样例

    3. **JavaScript/jQuery**：为了实现动态交互，通常会使用JavaScript或者更高级的库如jQuery。通过监听用户点击事件，可以改变Tab的状态，显示或隐藏对应的Tab内容。JavaScript还可以添加动画效果，提升用户体验。 ...

    jQuery简单实用圆角分页按钮样式代码.zip

    在本例中，jQuery将用于创建和操作DOM元素，以及添加动态效果。 文件结构如下： 1. **index.html**：这是网页的主体部分，包含HTML结构和引用外部资源如CSS和JS文件的链接。在`&lt;head&gt;`标签内引入jQuery库和自定义...

    JQuery 办公系统框架可应用于CRM系统

    - **DOM操作**：jQuery提供了简便的API来操作DOM，如添加、删除或修改元素，这在构建CRM系统的动态界面时不可或缺。 - **事件处理**：通过`.on()`方法，jQuery可以轻松地绑定和处理各种用户交互事件，比如点击、...

    jQuery垂直手风琴列表展示代码.zip

    jQuery库简化了JavaScript的操作，使得我们可以轻松地选中页面元素、添加事件监听器以及执行平滑的动画效果。例如，我们可以使用`.click()`方法监听用户的点击事件，当用户点击某一项时，通过`.slideToggle()`函数...

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