JavaScriptで
JavaScriptを使って<select>リストの項目を事前に選択状態にするには、selectedIndexプロパティを使用します。このプロパティに、あらかじめ選択しておきたい項目のインデックス番号を設定するだけで実現できます。
<script>タグ内での記述方法は以下のとおりです。add_select_idには<select>タグに付けたidを、add_item_indexには数値のインデックスを指定します。なお、このインデックスは0から始まる点に注意してください。たとえば先頭の項目は「0」、2番目の項目は「1」となり、事前選択したい項目に対応する番号を設定します。
サンプルコード
次のコードを実行すると、JavaScriptによってリスト項目を事前選択できることを確認できます。
<!DOCTYPE html>
<html>
<head>
<title>Preselect List Item</title>
</head>
<body>
<p> Select any one:</p>
<form>
<select id="dropdown" name="dropdown" class="form-control">
<option value = "Java">Java</option>
<option value = "Discrete Mathematics">Discrete Mathematics</option>
<option value = "Digital Electronics">Digital Electronics</option>
</select>
</form>
<script>
document.getElementById("dropdown").selectedIndex = "2";
</script>
</body>
</html>上記の例では、selectedIndexに「2」を設定しているため、3番目の選択肢である「Digital Electronics」がページ読み込み時に自動的に選択された状態で表示されます。このように、フォームの初期値をプログラム側で制御したい場合に非常に便利な手法です。
-
JavaScriptでHTMLリストを並べ替える方法を初心者向けに解説
Webページ上のリスト（<ul>や<ol>）を、ボタンをクリックしたときに自動的にアルファベット順へ並べ替えたいケースはよくあります。JavaScriptを使えば、ページを再読み込みすることなく、DOMを直接操作してリスト項目の順序を入れ替えることができます。ここでは、「クリックすると並べ替えが実行されるボタン」を持つシンプルなサンプルを紹介します。サンプルコード<!DOCTYPE html> <html> <body> <h1>リスト並べ替えの例</h1> <button>クリックして並べ替え&l
-
JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説
Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。 実装の仕組み この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。 CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する querySelectorAll()でページ内のすべての閉じるボタン（.clo