How to link the js drop-down selection box and the input box to add the selected value to the input box

How to link the js drop-down selection box and the input box to add the selected value to the input box_javascript skills

WBOY

Release： 2016-05-16 15:44:41

Original

1713 people have browsed it

The example in this article describes the method of linking the js drop-down selection box and the input box to add the selected value to the input box. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the linkage between the js drop-down selection box and the input box, and the effect of directly adding the selected value to the input box. I believe many friends have seen this effect. It saves the user the trouble of input. Here, JS is used to directly assign the value to the input box. After understanding the principle, it can be used flexibly to expand more special effects.

The running screenshot is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-select-value-to-input-codes/

The specific code is as follows:

<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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.