Friday, July 30, 2010

点击下拉菜单选项,添加选中值到输入框

这是一个下拉选择框与输入框联动的网页特效，点击下拉菜单的选项，直接添加选中值到输入框中，这种效果相信不少朋友见到过吧，省去用户输入的麻烦， 这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。

　　看一下实例代码，当然也可以修改后再运行：




<html>
<head>
<title>下拉选择框与输入框联动，直接添加选中值到输入框 - Liehuo.Net</title>
</head>
<body>
<select id="uiSel">
<option value="-1">请任意选择</option>
<option value="Liehuo.Net_1">Liehuo.Net_1</option>
<option value="Liehuo.Net_2">Liehuo.Net_2</option>
<option value="Liehuo.Net_3">Liehuo.Net_3</option>
<option value="Liehuo.Net_4">Liehuo.Net_4</option>
<option value="Liehuo.Net_5">Liehuo.Net_5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementByIdx_x('uiSel').onchange=function (){
if(this.options[0].value==-1)this.options[0]=null;
document.getElementByIdx_x('show').value=this.value
};
</script>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.liehuo.net/' target='_blank'>http://www.liehuo.net/</a></center>



转自： http://www.liehuo.net/a/201004/2515793.html
发贴者 YAO Luxin 时间： 00:46
标签：

0 评论:

Post a Comment