セレクトボックス値を動的に生成｜value="任意"

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": [{text:'アニメ1', value:'anime1'}, {text:'アニメ2', value:'anime2'}, {text:'アニメ3', value:'anime3'}],

		"drama": [{text:'ドラマ1', value:'drama1'}, {text:'ドラマ2', value:'drama2'}, {text:'ドラマ3', value:'drama3'}],

		"movie": [{text:'映画1', value:'movie1'}, {text:'映画2', value:'movie2'}, {text:'映画3', value:'movie3'}]
	};

	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['text'];

			option.value = menu['value'];

			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