`
ice-cream
  • 浏览: 321482 次
  • 性别: 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>
 
分享到:
评论

相关推荐

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

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

    JS中input表单隐藏域及其使用方法

    主要介绍了JS中input表单隐藏域及其使用方法讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    父组件向子组件传值.html

    父组件向子组件传值,无需导入js,直接使用浏览器访问即可查看Demo效果。 1.父组件向子组件传值可以在自定义标签处用“:模版-值=‘父组件中值’”,如 &lt;app_t_input :msg-t="msg"&gt;&lt;/app_t_input&gt; 2.而对应需要在子...

    关于js与php互相传值的介绍

    JS是前台的语言,PHP是后台的语言,初学时会经常出现前后台分不清的情况(我当初就是这样的,现在有时也在犯),我当初的想法是就把前后台当成两个岛,他们是无法跨越的,HTML就像一...input type=”text” name=”use

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

    一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 代码如下:&lt;input type=”text” name=”username”&gt;&lt;input type=”text” name=”sex”&gt;&lt;input type=”...

    javascript不同页面传值的改进版

    其实原理也很简单。同样先通过getAttribute判断type属性,捕捉到按钮。然后在按钮onclick时把i通过url传入子页面。...– var aInput = document.getElementsByTagName(“input”); for (i = 0 ; i &lt;

    tagsinput.js 实现记录checkbox勾选顺序

    tagsinput.js 实现记录checkbox勾选顺序,并显示在页面上,可传值给后台.zip

    JS隐藏参数post传值实例

    input type=”hidden” id=”mid” name=”mid” value=””&gt; &lt;/form&gt; [removed] function forwardTo(rid){ document.getElementById(‘mid’).value=rid; //赋值给隐藏域字段//alert&#40;document....

    Angular2 组件间通过@Input @Output通讯示例

    子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。 子组件: @Input() title:string; _name:string = ''; @Input() set name(name:string) { this._name=(name&&name.trim())||''; } 上面的...

    Javascript showModalDialog两个窗体之间传值

    Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...

    php实现向javascript传递数组的方法

    这里介绍的PHP进行数组传值给javascript的技巧,此方法适用php5.2以上,php5.2以上自带该类。低于5.2的,请下载json类。json是一种数据传输格式 php代码: $arr=array('1','2','3','4','5'); $str=json_encode($...

    layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

    input type=hidden id=getValue name=getValue value= /&gt; js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 var...

    Angularjs2不同组件间的通信实例代码

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务...

    Javascript 两个窗体之间传值实现代码

    input type=”text” id=”txtInput” /&gt; &lt;input type=”button” value=”OpenChild” onclick=”OpenChildWindow()” /&gt; 然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素: XML-

    jsp实现checkbox的ajax传值实例

    本文实例讲述了jsp实现checkbox的ajax传值用法。分享给大家供大家参考。具体分析如下: 今天我想用ajax把选中的所有的chekbox的值全部都传到后台做一个处理,但在后台接收值的时候,我遇到了麻烦,以为没有经过跳转...

    PHP HTML JavaScript MySQL代码如何互相传值的方法分享

    input type=”” readonly=”readonly” style=’background-color:#DCDCDC’ value=&lt;?php echo $perinfo[ID];?&gt; /&gt; JavaScript代码中 复制代码 代码如下: [removed] var ability=&lt;?php echo JSON($...

    js创建数据共享接口——简化框架之间相互传值

    很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 代码如下: window.parent.document.getElementById(“main”) .contentWindow.document.getElementById(‘input’).value = document....

    怎么掌握微信小程序的取值、传值、数据存储

    小程序界面设定如下 父级页面:A界面 子级页面:B界面 ...js: 复制代码 data: { userPhone: '', }, //手机号输入框事件键盘输入时触发(文字提醒) userPhoneInput: function (e) { this.setData({

    js时间控件

    该时间控件支持各大主流浏览器,input时间控件,页面直接显示,与php结合,给定时间默认显示该时间,...只显示日期,日期加时间,清除,今天,确定按钮等随意控制,可以当页面日历使用,当传值时候,会默认显示该值。

    jquery传参及获取方式(两种方式)

    &lt;form id=myform&gt; &lt;input type=radio value=1 name=gender&gt;男 &lt;input type=radio value=2 name=gender&gt;...input type=text name=... script src =js/jquery-3.3.1.min.js &gt;&lt;/ script &gt;

Global site tag (gtag.js) - Google Analytics