セレクトボックス値を動的に生成

Demo

HTML&CSS

HTMLindex.htmldownload

<div class="se_auto1">

	<select name="category" onchange="createMenu(this.value)">

		<option disabled selected>カテゴリを選択してください</option>

		<option value="anime">アニメ</option>

		<option value="drama">ドラマ</option>

		<option value="movie">映画</option>
	</select>

	<select name="list" id="list" disabled>

		<option disabled selected>コンテンツを選択してください</option>
	</select>
</div>

<script>

	const categoryMenu = {

		"anime": ["アニメ1", "アニメ2", "アニメ3"],

		"drama": ["ドラマ1", "ドラマ2", "ドラマ3"],

		"movie": ["映画1", "映画2", "映画3"]
	};

	function createMenu(selectCategory){

		let list = document.getElementById('list');

		list.disabled = false;

		list.innerHTML = '';

		let option = document.createElement('option');

		option.innerHTML = 'コンテンツを選択してください';

		option.defaultSelected = true;

		option.disabled = true;

		list.appendChild(option);

		categoryMenu[selectCategory].forEach( menu => {

			let option = document.createElement('option');

			option.innerHTML = menu;

			list.appendChild(option);
		});
	}
</script>

CSSstyle.cssdownload

.se_auto1{
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	border: 1px solid #ccc;
}
.se_auto1 select{
	width: 100%;
	height: 2rem;
	outline: none;
	margin-bottom: 2rem;
	border: 1px solid #ccc;
}
© 2025 wayday