`
ice-cream
  • 浏览: 327644 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

用js给input传值

阅读更多
<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中java代码与js之间的传值

    - **通过JSP脚本元素**:在JSP中,可以使用 `&lt;script&gt;` 标签直接输出JavaScript代码,将Java变量的值传递给JavaScript。例如: ```jsp var myValue = "&lt;%= javaVariable %&gt;"; ``` - **通过JSP表达式语言...

    javascript 跨网页传值

    JavaScript跨页传值有多种策略,从简单的URL查询参数到复杂的Web Storage和消息通信,开发者可以根据实际需求选择合适的方法。在选择过程中,应考虑数据的类型、安全性、存储限制以及性能等因素。在处理敏感数据时,...

    js 页面 弹窗 传值 接值

    在JavaScript编程中,"弹窗"通常指的是使用`window.alert()`, `window.confirm()`或`window.prompt()`等方法创建的对话框。这些方法允许我们与用户进行交互,获取输入或者显示信息。本篇将深入探讨如何在页面之间...

    javascript静态页面传值的三种方法

    【JavaScript静态页面传值的三种方法】 在网页开发中,我们经常需要在不同的页面之间传递数据,尤其是在没有服务器端交互的静态页面中。JavaScript提供了多种方法来实现这一目标,包括通过URL、Cookie以及...

    checkbox复选框传值

    &lt;input type="checkbox" name="interests" value="music"&gt; &lt;input type="checkbox" name="interests" value="sports"&gt; &lt;input type="checkbox" name="interests" value="reading"&gt; ``` 这里,`interests`是复选框组...

    WEB页面传值

    页面传值有多种方法,包括JavaScript传值、ASP.NET页面传值、后台访问JS变量、JS调用后台函数和后台调用JS函数等。 一、JavaScript传值 JavaScript传值是指在页面之间使用JavaScript脚本来传递数据的方法。有一种...

    javascript实现浮动窗口传值

    标题中的“javascript实现浮动窗口传值”指的是在网页中使用JavaScript技术来创建一个浮动窗口(通常是弹出框或对话框)并与主页面或其他窗口进行数据交互。这种功能常见于提示信息、用户输入验证或者在不刷新整个...

    js使用ajax传值给后台,后台返回字符串处理方法

    之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次。 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台,前台再绑定到其他...

    checkbox选中 全选 传值

    通过阅读源码,开发者可以学习到如何组织代码,以及如何用JavaScript操作DOM(文档对象模型)来实现动态交互。 5. **工具的使用**: 在实际项目中,开发者可能会使用各种工具来辅助开发,如前端框架(如React, Vue...

    ASP单选按钮实现页面跳转并传值

    使用 ASP 实现单选按钮的页面跳转并传值是非常简单的,只需要使用 JavaScript 来实现 onclick 事件,并将单选按钮的值传递给下一个页面。同时,在下一个页面中,我们可以使用 Request.QueryString 获取传递的参数,...

    Vue 组件间传值及事件触发Demo

    在Vue.js框架中,组件是构建用户界面的基本单元,它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程将详细讲解如何在Vue组件间进行值传递以及事件触发,帮助你更好地理解并运用...

    关于JSP页面间的传值

    URL重写适用于简单的GET请求传值,表单提交适用于POST请求传值,而使用JavaScript动态修改URL则适用于需要在页面内部动态改变链接地址的情况。在实际开发中,应根据具体需求选择合适的传值方式,以提高程序的可维护...

    js与php利用FormData相互传值

    本文将详细探讨如何使用`FormData`对象在JS和PHP之间进行数据交互,以及实现相互传值的过程。 `FormData`是HTML5引入的一个非常实用的API,它允许我们构建一个键值对的数据集合,常用于发送数据到服务器,特别是在...

    JSP与servlet之间的传值

    另一种常见的传值方式是通过 URL 参数的形式传递数据给 Servlet。这种方式适用于简单的查询参数或少量的数据传递。 示例代码: ```jsp &lt;a href="JspServlet?action=toServlet"&gt;click me ``` 在 Servlet 中,可以...

    JavaScript和ASP.NET的传值

    在ASP.NET中,服务器控件(如TextBox、DropdownList等)的默认模式下,它们的ID在客户端会改变,这给JavaScript直接访问带来了困难。为了解决这个问题,我们可以使用`ClientIDMode`属性来保持服务器控件的ID不变,...

    几种JSP页面传值方式.txt

    以上介绍了几种常用的JSP页面传值方式,包括使用表单、URL重写、JavaScript动态改变表单行为、JSP内置对象和标签库以及Cookie和Session。不同的场景下可以选择不同的方法来满足需求。在实际应用中,开发者还需要考虑...

    jquery实现页面之间的传值功能

    ### jQuery 实现页面之间的传值功能 #### 一、概述 在 Web 开发中,页面间的数据传递是一项基本且重要的任务。传统的表单提交方法虽然简单有效,但在用户体验上往往不尽如人意。随着 AJAX 技术的发展,利用 ...

    jsp页面之间的传值

    ### JSP页面之间的传值详解 #### 一、引言 在Web开发中,数据的传递是一项基础且重要的任务。特别是在使用JSP技术时,如何有效地在不同的JSP页面或JSP与Servlet之间进行数据传输,是每个开发者都需要掌握的核心...

    javascript不同页面传值的改进版

    通过`window.opener.document.getElementsByTagName("input")`,我们可以找到父页面中的文本框,然后使用`slice()`方法解析URL,获取传递过来的`i`值,最后将子页面的文本框值赋给父页面相应位置的文本框。...

    vue.js 传值方法(父子组件传值、非父子组件传值)

    - 模板中使用`v-model`进行双向数据绑定,并绑定`inputchange`事件: ```html &lt;input v-model="childinfor" @input="inputchange" /&gt; ``` - 父组件: - 监听子组件发射的`inputchange`事件并定义响应方法: ...

Global site tag (gtag.js) - Google Analytics