`
舟舟同学
  • 浏览: 45670 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JQuery开发8-输入框同步操作和获取select列表控件值

阅读更多

有时候为例提高输入效率,需要多个输入框实现同步输入操作,在jQuery中参考代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript"
	src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(":text").bind("keyup", function() {
			$(":text").val($(this).val());//多个输入框同步输入
		});
	});
</script>
</head>
<body>
	<form>
		<p>
			<label>文本框1:</label> <input type="text">
		</p>
		<p>
			<label>文本框2:</label> <input type="text">
		</p>
		<p>
			<label>文本框3:</label> <input type="text">
		</p>
		<p>
			<label>文本框4:</label> <input type="text">
		</p>
		<input type="submit" value="提交" id="sub" />
	</form>
</body>
</html>

 另外,在jQuery中选取select列表控件当前选中的option值的参考代码如下:

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript"
	src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	   $("#d").html($("#s").val());
		$("#s").change(function(){
		//var str="";
		str=$("#s").val();//获得列表控件的值
		$("#d").html(str);
		});
	});
</script>
</head>
<body>
<form>
<select id="s" multiple="multiple">
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<div id="d"></div>
</form>	
</body>
</html>

 

0
0
分享到:
评论

相关推荐

    jquery 自定义select控件

    为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...

    jquery课堂资源--常用控件及使用方法

    - 使用方法:首先引入jQuery和jQuery UI的库,然后通过`.datepicker()`方法绑定到输入框元素。 ```html &lt;input type="text" id="date-input"&gt; $(function() { $("#date-input").datepicker(); }); ``` 2. **...

    jQuery操作DOM之获取表单控件的值

    总结来说,jQuery的`.val()`方法是处理表单控件值的最佳选择,它简化了DOM操作,确保了在获取和设置值时的准确性和实时性。熟练掌握这一方法,将极大地提高jQuery编程的效率和代码的可读性。在开发过程中,结合使用`...

    js与jquery获取input输入框中的值实例讲解.docx

    ### JS与jQuery获取Input输入框中的值实例讲解 #### 一、引言 在Web开发中,经常需要处理用户输入的数据。JavaScript 和 jQuery 是前端开发中最常用的两种工具,它们提供了强大的功能来操作DOM(文档对象模型),...

    JQuery 时间控件、日期控件

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题将深入探讨jQuery中的时间控件和日期控件,这些组件在创建交互式用户界面时非常有用,特别是在处理表单输入...

    可输入可选择的SELECT控件

    在网页设计和开发中,`SELECT`控件是一种常见的用户界面元素,用于提供下拉菜单选项,让用户在预设的选项中进行选择。然而,传统的`SELECT`控件往往只支持用户从已定义的选项中选择,而不允许自由输入。但随着用户...

    基于div的输入框控件

    在网页设计和开发中,创建用户友好的交互界面是至关重要的。"基于div的输入框控件"是一种创新的方法,它使用HTML的`&lt;div&gt;`元素替代传统的`&lt;select&gt;`下拉框,来提供更加灵活和自定义化的数据选择与输入体验。这种技术...

    基于ztree开发的下拉树控件ztree-select

    【基于ztree开发的下拉树控件ztree-select】是一种高效的前端UI组件,它结合了ztree的核心特性和下拉菜单的功能,适用于构建具有层级结构的选中项。ztree是一个广泛使用的JavaScript树形插件,而ztree-select则是其...

    jquery_ui日历控件

    例如,`select`事件会在用户选择日期时触发,你可以监听这个事件来获取所选日期并执行相应的操作。 在实际项目中,可能需要与其他jQuery UI组件(如对话框、按钮等)结合使用,或者与后端数据进行交互。例如,你...

    bootstrap可编辑下拉框jquery.editable-select

    下载链接地址:链接: ...然后直接请看代码: 引用: [removed][removed] &lt;link href="${ contextPath }/res/sys/scripts/css/jquery.editable-select.min.css" rel="external nofollow" rel="styl

    可编辑并自动提示的select控件

    1. **基本结构**:一个可编辑的select控件通常包含一个输入框(input)和一个下拉列表(select)。输入框用于接收用户输入,下拉列表则展示可选的选项。 2. **事件监听**:通过JavaScript监听输入框的keyup或input事件...

    可输入的下拉列表控件

    可输入的下拉列表控件jquery.editable-select,官方的控件不支持&lt;option value='1'&gt;2无法获得value 的值,经过修改,可以获得到value 值,很方便使用

    Jquery可编辑下拉框控件

    在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。"Jquery可编辑下拉框控件"是一种基于jQuery的组件,它提供了更丰富的用户交互体验,允许用户在下拉框中进行编辑,...

    jquerymobile我自己写的常用控件和事件代码

    通过学习和实践这些示例,你可以更好地理解和掌握 jQuery Mobile 的核心功能,从而高效地开发移动应用。记得结合官方文档(http://api.jquerymobile.com/)进行深入学习,以获取最新和最完整的API信息。

    标签下拉列表控件.zip

    【标签下拉列表控件】是一款在Web开发中常见的交互元素,主要应用于用户界面中,为用户提供方便的标签选择和下拉列表浏览功能。在Web前端领域,这种控件通常通过JavaScript库或框架实现,例如本例中提及的Selectize...

    精美漂亮的实用div+css模仿select下拉框控件

    2. **模仿Select控件** HTML的`&lt;select&gt;`元素是网页表单中的一种,通常用于提供一组选项让用户选择。但是,其默认样式在不同浏览器之间存在差异,且样式定制较为复杂。通过jQuery和CSS,我们可以自定义下拉框的外观...

    jquery根据name取得select选中的值实例(超简单)

    通过本文的内容,相信读者可以了解到使用jQuery通过name属性获取select选中值的方法,以及如何操作HTML中的textarea元素。jQuery的灵活性和便利性使得开发者能够以简洁的方式处理网页上的动态内容和交互,极大地提高...

    jquery自动完成控件

    **jQuery 自动完成控件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。"jQuery 自动完成控件"就是这样一个功能,它可以在用户输入时提供预测建议,大大提高了输入效率,尤其适用于...

    日历控件(日期和时间)

    总的来说,"jquery-ui-timepicker-addon"控件为Web开发提供了一种高效且灵活的方式来处理日期和时间输入,通过其丰富的配置选项和事件,可以满足各种复杂的需求。无论是用于网站表单、后台管理系统还是移动端应用,...

Global site tag (gtag.js) - Google Analytics