ホームページ >ウェブフロントエンド >jsチュートリアル >js ドロップダウン選択ボックスと入力ボックスをリンクして、選択した値を入力ボックスに追加する方法_javascript スキル
js ドロップダウン選択ボックスと入力ボックスをリンクして、選択した値を入力ボックスに追加する方法_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:44:411770ブラウズ
この記事の例では、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 プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。