이 글의 예시에서는 js 드롭다운 선택 상자와 입력 상자를 연결하여 선택한 값을 입력 상자에 추가하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
js 드롭다운 선택 상자와 입력 상자 간의 연결과 선택한 값을 입력 상자에 직접 추가하는 효과를 시연합니다. 많은 친구들이 이 효과를 본 적이 있을 것으로 생각됩니다. 여기서 JS를 사용하여 입력 상자에 직접 값을 할당하면 더 많은 특수 효과를 확장할 수 있습니다.
실행 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-select-value-to-input-codes/
구체적인 코드는 다음과 같습니다.
<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>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
