この記事の例では、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 プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
