ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery: チェックボックスを備えた複数選択のドロップダウン メニューを作成する
HTML、CSS、jQuery: チェックボックスを備えた複数選択のドロップダウン メニューを作成する
- PHPzオリジナル
- 2023-10-27 14:22:591838ブラウズ
HTML、CSS、jQuery: チェックボックスを備えた複数選択ドロップダウン メニューの作成
インターネットの継続的な発展により、Web デザインとインタラクティブなエクスペリエンスは、ますます重要になります。以前は、マウスのクリックによる選択が一般的なインタラクション方法でしたが、ユーザーのニーズの多様化に伴い、より柔軟でインテリジェントなインタラクション方法が求められています。この記事では、HTML、CSS、jQueryを使ってチェックボックス付きの複数選択ドロップダウンメニューを作成する方法を紹介します。
まず、選択ボックスといくつかのオプションを含む基本的な HTML 構造を作成する必要があります。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>多选下拉菜单</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">选择项</button>
<div class="dropdown-content">
<input type="checkbox" id="item1" name="item1" value="item1">
<label for="item1">选项1</label><br>
<input type="checkbox" id="item2" name="item2" value="item2">
<label for="item2">选项2</label><br>
<input type="checkbox" id="item3" name="item3" value="item3">
<label for="item3">选项3</label><br>
</div>
</div>
</body>
</html>次に、CSS を使用してドロップダウン メニューを美しくする必要があります。 style.css ファイルに次のコードを追加します。
/* 隐藏下拉菜单 */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
}
/* 隐藏复选框 */
.dropdown-content input[type="checkbox"] {
display: none;
}
/* 样式化下拉菜单按钮 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 鼠标移动到下拉菜单上时显示选项 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 选中选项时改变背景颜色 */
.dropdown-content input[type="checkbox"]:checked + label {
background-color: #ccc;
}上記のコードでは、いくつかの基本的な CSS スタイルを使用して、ドロップダウン メニューの表示と非表示を切り替えたり、選択したメニューの背景色を変更したりしています。オプション。
ここで、jQuery を使用して、ドロップダウン メニューの対話型動作を実装する必要があります。次のコードを script.js ファイルに追加します。
$(document).ready(function() {
// 点击按钮时显示或隐藏下拉菜单
$(".dropbtn").click(function() {
$(".dropdown-content").toggle();
});
// 当有选项被选中或取消选中时，更新按钮文本
$(".dropdown-content input[type='checkbox']").change(function() {
var selectedItems = [];
$(".dropdown-content input[type='checkbox']:checked").each(function() {
selectedItems.push($(this).next("label").text());
});
var buttonText = selectedItems.join(", ");
if(buttonText === "") {
buttonText = "选择项";
}
$(".dropbtn").text(buttonText);
});
}); この JavaScript コードでは、jQuery の toggle() メソッドを使用して、ドロップダウン メニューの表示と非表示を切り替えます。同時に、チェック ボックスの change イベントもリッスンします。オプションがオンまたはオフになると、ボタン上のテキストの内容が自動的に更新されます。
最後に、jQuery ライブラリをダウンロードして導入し、上記の 3 つのファイルを同じフォルダーに保存する必要があります。
上記の HTML、CSS、jQuery を組み合わせることで、チェックボックスを備えた複数選択のドロップダウン メニューを簡単に作成できます。このようなドロップダウン メニューにより、ユーザーはより柔軟で便利な選択エクスペリエンスを提供し、Web ページの対話性が向上します。
概要: HTML、CSS、jQuery を組み合わせることで、高度にインタラクティブなさまざまな Web ページ要素を簡単に作成できます。この一例は、より柔軟でインテリジェントな選択方法を提供する複数選択ドロップダウン メニューです。この記事のサンプル コードが役に立ち、Web デザインでより良いインタラクティブなエクスペリエンスを実現できることを願っています。
以上がHTML、CSS、jQuery: チェックボックスを備えた複数選択のドロップダウン メニューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。