Home > Web Front-end > JS Tutorial > How to link the js drop-down selection box and the input box to add the selected value to the input box_javascript skills

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template