<style>
#name{ float:left; height:25px;*height:24px;margin-right:10px;}
#btn{ cursor:pointer; background:#a5a5a5; border:1px solid #666666;padding:1px 3px 3px 3px;float:left;}
#box{ border:1px solid #a5a5a5; background:#a5a5a5; width:144px; color:#000;*margin-top:-15px;*width:146px;}
#box ul{ list-style:none; padding:0;margin:0;}
#box li{ cursor: pointer;}
</style>
<script language="javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}
function text(value_text) {
var get_value = "";
value_text = value_text.childNodes;
for ( var j = 0; j < value_text.length; j++ ) {
get_value += value_text[j].nodeType != 1 ? value_text[j].nodeValue : text(value_text[j].childNodes);
}
return get_value;
}
function init(){
var name=document.getElementById("name");
var btn=document.getElementById("btn");
var box=document.getElementById("box");
btn.onclick=function(){
box.style.display=box.style.display=="none"?"block":"none";
}
var data=box.getElementsByTagName("li");
for(var i=0;i<data.length;i++){
var currentObj=data[i];
currentObj.onclick=function(){
name.value=text(this);
}
}
}
addLoadEvent(init);
</script>
<input id="name" type="text"/> <div id="btn">click me</div>
<div style="clear:both"></div>
<div id="box" style="display:none">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
同样的效果用jquery来写就简单一些(这里你要先下载jquery库才能实现效果,附件中有提供):
<style>
#name{ float:left; height:25px;*height:24px;margin-right:10px;}
#btn{ cursor:pointer; background:#a5a5a5; border:1px solid #666666;padding:1px 3px 3px 3px;float:left;}
#box{ border:1px solid #a5a5a5; background:#a5a5a5; width:144px; color:#000;*margin-top:-15px;*width:146px;}
#box ul{ list-style:none; padding:0;margin:0;}
#box li{ cursor: pointer;}
</style>
<script type="text/javascript" src="scripts/jquery-1.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(
function(){
$("#box").toggle();
$("#box li").each(
function(i){
$(this).click(
function(){
$("#name").val(($(this).text()));
})
}
)
}
)
})
</script>
<input id="name" type="text"/> <div id="btn">click me</div>
<div style="clear:both"></div>
<div id="box" style="display:none">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
分享到:
相关推荐
- **通过JSP脚本元素**:在JSP中,可以使用 `<script>` 标签直接输出JavaScript代码,将Java变量的值传递给JavaScript。例如: ```jsp var myValue = "<%= javaVariable %>"; ``` - **通过JSP表达式语言...
JavaScript跨页传值有多种策略,从简单的URL查询参数到复杂的Web Storage和消息通信,开发者可以根据实际需求选择合适的方法。在选择过程中,应考虑数据的类型、安全性、存储限制以及性能等因素。在处理敏感数据时,...
在JavaScript编程中,"弹窗"通常指的是使用`window.alert()`, `window.confirm()`或`window.prompt()`等方法创建的对话框。这些方法允许我们与用户进行交互,获取输入或者显示信息。本篇将深入探讨如何在页面之间...
【JavaScript静态页面传值的三种方法】 在网页开发中,我们经常需要在不同的页面之间传递数据,尤其是在没有服务器端交互的静态页面中。JavaScript提供了多种方法来实现这一目标,包括通过URL、Cookie以及...
<input type="checkbox" name="interests" value="music"> <input type="checkbox" name="interests" value="sports"> <input type="checkbox" name="interests" value="reading"> ``` 这里,`interests`是复选框组...
页面传值有多种方法,包括JavaScript传值、ASP.NET页面传值、后台访问JS变量、JS调用后台函数和后台调用JS函数等。 一、JavaScript传值 JavaScript传值是指在页面之间使用JavaScript脚本来传递数据的方法。有一种...
标题中的“javascript实现浮动窗口传值”指的是在网页中使用JavaScript技术来创建一个浮动窗口(通常是弹出框或对话框)并与主页面或其他窗口进行数据交互。这种功能常见于提示信息、用户输入验证或者在不刷新整个...
之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次。 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台,前台再绑定到其他...
通过阅读源码,开发者可以学习到如何组织代码,以及如何用JavaScript操作DOM(文档对象模型)来实现动态交互。 5. **工具的使用**: 在实际项目中,开发者可能会使用各种工具来辅助开发,如前端框架(如React, Vue...
使用 ASP 实现单选按钮的页面跳转并传值是非常简单的,只需要使用 JavaScript 来实现 onclick 事件,并将单选按钮的值传递给下一个页面。同时,在下一个页面中,我们可以使用 Request.QueryString 获取传递的参数,...
在Vue.js框架中,组件是构建用户界面的基本单元,它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程将详细讲解如何在Vue组件间进行值传递以及事件触发,帮助你更好地理解并运用...
URL重写适用于简单的GET请求传值,表单提交适用于POST请求传值,而使用JavaScript动态修改URL则适用于需要在页面内部动态改变链接地址的情况。在实际开发中,应根据具体需求选择合适的传值方式,以提高程序的可维护...
本文将详细探讨如何使用`FormData`对象在JS和PHP之间进行数据交互,以及实现相互传值的过程。 `FormData`是HTML5引入的一个非常实用的API,它允许我们构建一个键值对的数据集合,常用于发送数据到服务器,特别是在...
另一种常见的传值方式是通过 URL 参数的形式传递数据给 Servlet。这种方式适用于简单的查询参数或少量的数据传递。 示例代码: ```jsp <a href="JspServlet?action=toServlet">click me ``` 在 Servlet 中,可以...
在ASP.NET中,服务器控件(如TextBox、DropdownList等)的默认模式下,它们的ID在客户端会改变,这给JavaScript直接访问带来了困难。为了解决这个问题,我们可以使用`ClientIDMode`属性来保持服务器控件的ID不变,...
以上介绍了几种常用的JSP页面传值方式,包括使用表单、URL重写、JavaScript动态改变表单行为、JSP内置对象和标签库以及Cookie和Session。不同的场景下可以选择不同的方法来满足需求。在实际应用中,开发者还需要考虑...
### jQuery 实现页面之间的传值功能 #### 一、概述 在 Web 开发中,页面间的数据传递是一项基本且重要的任务。传统的表单提交方法虽然简单有效,但在用户体验上往往不尽如人意。随着 AJAX 技术的发展,利用 ...
### JSP页面之间的传值详解 #### 一、引言 在Web开发中,数据的传递是一项基础且重要的任务。特别是在使用JSP技术时,如何有效地在不同的JSP页面或JSP与Servlet之间进行数据传输,是每个开发者都需要掌握的核心...
通过`window.opener.document.getElementsByTagName("input")`,我们可以找到父页面中的文本框,然后使用`slice()`方法解析URL,获取传递过来的`i`值,最后将子页面的文本框值赋给父页面相应位置的文本框。...
- 模板中使用`v-model`进行双向数据绑定,并绑定`inputchange`事件: ```html <input v-model="childinfor" @input="inputchange" /> ``` - 父组件: - 监听子组件发射的`inputchange`事件并定义响应方法: ...