下拉选择框与输入框联动,直接添加选中值到输入框(图文)

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

代码如下:

<html>

<head>

<title>下拉选择框与输入框联动,直接添加选中值到输入框</title>

</head>

<body>

<select id="uiSel">

    <option value="-1">请选择</option>

    <option value="until1">unti1</option>

    <option value="until2">unti2</option>

    <option value="until3">unti3</option>

    <option value="until4">unti4</option>

    <option value="until5">unti5</option>

</select>

<input type="text" name="" id="show" />

</body>

<script type="text/javascript">

document.getElementById('uiSel').onchange=function (){

    if(this.options[0].value==-1)this.options[0]=null;

    document.getElementById('show').value=this.value

};

</script>

</html>

效果图:


 联系我们

  • 邮箱:admin@admincms.top
  • 官方博客:blog.admincms.top
  • 官方微信公众号:huayuejishu
扫描二维码关注Joker.Liu微信公众号
TOP博客官方微信公众号二维码