コンボボックスのリストを全て削除 ▼ 実際の実行
<script type="text/javascript"> function resetCombo() { var combo = document.frm1.combo1 combo.length = 0; } </script> <form name="frm1"> <select name="combo1" style='width:150px;'> <option value="1">データ1 </option> <option value="2">データ2 </option> <option value="3">データ3 </option> <option value="4">データ4 </option> </select> </form> <input type="button" value="全て削除" onclick='resetCombo();'>
一つづつ削除する場合は、combo.remove(index) です。 コンボボックスにリストを追加する ▼ 実際の実行
<script type="text/javascript"> function addCombo() { var combo = document.frm2.combo2; var option = null; for( i = 0; i < 4; i++ ) { option = document.createElement("option"); option.value = i+1; option.text = "オプション"+(i+1); combo.appendChild(option) } } </script> <form name="frm2"> <select name="combo2" style='width:150px;'> </select> </form> <input type="button" value="データ追加" onclick='addCombo();'>
コンボボックスにリストを挿入する ▼ 実際の実行
<script type="text/javascript"> function insertOption() { var combo = document.frm3.combo3; var option = document.createElement("option"); option.value = 1.5; option.text = "データ1.5"; combo.insertBefore(option,combo.options[1]); } </script> <form name="frm3"> <select name="combo3" style='width:150px;'> <option value="1">データ1 </option> <option value="2">データ2 </option> <option value="3">データ3 </option> <option value="4">データ4 </option> </select> </form> <input type="button" value="リスト挿入" onclick='insertOption();'>
コンボボックスのリスト移動する ▼ 実際の実行
<script type="text/javascript"> function moveOption() { var combo = document.frm4.combo4; combo.insertBefore(combo.options[1],combo.options[3]); } </script> <form name="frm4"> <select name="combo4" style='width:150px;'> <option value="1">データ1 </option> <option value="2">データ2 </option> <option value="3">データ3 </option> <option value="4">データ4 </option> </select> </form> <input type="button" value="リスト移動" onclick='moveOption();'>
コンボボックスのテキスト部分を取得 ▼ 実際の実行
<script type="text/javascript"> function getOptionText() { var combo = document.frm5.combo5; alert( combo.options[2].text ); } </script> <form name="frm5"> <select name="combo5" style='width:150px;'> <option value="1">データ1 </option> <option value="2">データ2 </option> <option value="3">データ3 </option> <option value="4">データ4 </option> </select> </form> <input type="button" value="リスト参照" onclick='getOptionText();'>
コンボボックスの選択状態を操作する ▼ 実際の実行
<script type="text/javascript"> function selectOption() { var combo = document.frm6.combo6; combo.selectedIndex = 2; } function noSelectOption() { var combo = document.frm6.combo6; combo.selectedIndex = -1; } </script> <form name="frm6"> <select name="combo6" style='width:150px;'> <option value="1">データ1 </option> <option value="2">データ2 </option> <option value="3">データ3 </option> <option value="4">データ4 </option> </select> </form> <input type="button" value="データ3を選択" onclick='selectOption();'> <input type="button" value="未選択" onclick='noSelectOption();'>
昔はこの方法は使え無いブラウザがあったかもしれません。全て直感的な操作ですが、本来 options コレクションに対して実行するような内容が、コンボボックスに直接可能になっています。
タグ:javascript
|
【JavaScriptの最新記事】
- テキストエリアでタブ処理
- ブラウザ判定 : String.prototype.browser に登録して、文字列と実際のブラウザが一致したら true を返す
- jQuery UI の datepicker を使用した現在の日付文字列の取得 と 一般的な現在の日付文字列の加工取得処理
- geolocation を使用して『都道府県選択コンボボックス』の初期値を現在の緯度・経度から選択する
- 雪を降らす snowstorm.js の 特定 DIV 内での実装
- IE や Firefox の開発者ツールのコンソールで簡単に localStorage を見る為の1行コード
- JavaScript : ブックマークレットの作り方
- いまさらですが、JavaScript で、グローバル領域を汚さない変数宣言の使用方法
- 二回目のロードは無視する、JavaScrip ライブラリの基本スケルトン
- ブックマークレットから、ページ中央に固定する IFRAME ウインドウを作成する
- JavaScript の全ての オブジェクトに同じ機能を持たせる
- JavaScript : 文字列で表現された日付を論理チェック
- HighslideJS 用貼り付けコード作成
- テキストエリアに入れた JSON データをチェックするコード(F12等の開発者ツールも使う) / JSON.stringify と JSON.parse
- エレメント(主にPRE)を選択状態にする
- lightbox-2.6.min.js を使うのに、Google ドライブでホストしました。
- JS : function() {} という『無名の処理』の理解
- GoogleVisualizationAPIを使用したブラウザ比率の円グラフ(2009年3月〜) / IE がまだ半分を占めてます
- Safari for windows の alert
- 【WEB+JS】ブラウザ毎にかなり違うJavaScriptによる入力制限(キーに反応しないようにする)