<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获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次。 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台,前台再绑定到其他...
主要介绍了JS中input表单隐藏域及其使用方法讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
父组件向子组件传值,无需导入js,直接使用浏览器访问即可查看Demo效果。 1.父组件向子组件传值可以在自定义标签处用“:模版-值=‘父组件中值’”,如 <app_t_input :msg-t="msg"></app_t_input> 2.而对应需要在子...
JS是前台的语言,PHP是后台的语言,初学时会经常出现前后台分不清的情况(我当初就是这样的,现在有时也在犯),我当初的想法是就把前后台当成两个岛,他们是无法跨越的,HTML就像一...input type=”text” name=”use
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 代码如下:<input type=”text” name=”username”><input type=”text” name=”sex”><input type=”...
其实原理也很简单。同样先通过getAttribute判断type属性,捕捉到按钮。然后在按钮onclick时把i通过url传入子页面。...– var aInput = document.getElementsByTagName(“input”); for (i = 0 ; i <
tagsinput.js 实现记录checkbox勾选顺序,并显示在页面上,可传值给后台.zip
input type=”hidden” id=”mid” name=”mid” value=””> </form> [removed] function forwardTo(rid){ document.getElementById(‘mid’).value=rid; //赋值给隐藏域字段//alert(document....
子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。 子组件: @Input() title:string; _name:string = ''; @Input() set name(name:string) { this._name=(name&&name.trim())||''; } 上面的...
Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...
这里介绍的PHP进行数组传值给javascript的技巧,此方法适用php5.2以上,php5.2以上自带该类。低于5.2的,请下载json类。json是一种数据传输格式 php代码: $arr=array('1','2','3','4','5'); $str=json_encode($...
input type=hidden id=getValue name=getValue value= /> js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 var...
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务...
input type=”text” id=”txtInput” /> <input type=”button” value=”OpenChild” onclick=”OpenChildWindow()” /> 然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素: XML-
本文实例讲述了jsp实现checkbox的ajax传值用法。分享给大家供大家参考。具体分析如下: 今天我想用ajax把选中的所有的chekbox的值全部都传到后台做一个处理,但在后台接收值的时候,我遇到了麻烦,以为没有经过跳转...
input type=”” readonly=”readonly” style=’background-color:#DCDCDC’ value=<?php echo $perinfo[ID];?> /> JavaScript代码中 复制代码 代码如下: [removed] var ability=<?php echo JSON($...
很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码: 代码如下: window.parent.document.getElementById(“main”) .contentWindow.document.getElementById(‘input’).value = document....
小程序界面设定如下 父级页面:A界面 子级页面:B界面 ...js: 复制代码 data: { userPhone: '', }, //手机号输入框事件键盘输入时触发(文字提醒) userPhoneInput: function (e) { this.setData({
该时间控件支持各大主流浏览器,input时间控件,页面直接显示,与php结合,给定时间默认显示该时间,...只显示日期,日期加时间,清除,今天,确定按钮等随意控制,可以当页面日历使用,当传值时候,会默认显示该值。
<form id=myform> <input type=radio value=1 name=gender>男 <input type=radio value=2 name=gender>...input type=text name=... script src =js/jquery-3.3.1.min.js ></ script >