Bootstrapでドロップダウン切替え

Posted on by IKIX_wbdv

　よく見かけるタブ切替えではなく，ドロップダウン切替えを作ってみた．特徴は，<select>タグや<option>タグを使わず，Bootstrapで作ったので，多少見栄えが良いところ．

<!DOCTYPE html>
<head>
　<meta charset="utf-8">
　<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
　<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
　<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
　<div class="dropdown inline">
　　<button class="btn btn-secondary dropdown-toggle" type="button" id="grade" data-toggle="dropdown">
　　１年
　　</button>
　　<div class="dropdown-menu" aria-labelledby="grade">
　　　<a id="02" class="dropdown-item" href="#">２年</a>
　　　<a id="03" class="dropdown-item" href="#">３年</a>
　　　<a id="04" class="dropdown-item" href="#">４年</a>
　　</div>
　</div>
　<div id="class" class="inline">
　　<button class="btn">１組</button>
　</div>
　<script>
　　$(function(){
　　　$('#02').click(function(){
　　　　$('#grade').text('２年');
　　　　$('#class').empty();
　　　　$('#class').append('<button class="btn">１組</button><button class="btn">２組</button><button class="btn">３組</button>');
　　　})
　　　$('#03').click(function(){
　　　　$('#grade').text('３年');
　　　　$('#class').empty();
　　　　$('#class').append('<button class="btn">１組</button><button class="btn">２組</button>');
　　　})
　　　$('#04').click(function(){
　　　　$('#grade').text('４年');
　　　　$('#class').empty();
　　　　$('#class').append('<button class="btn">Ａ組</button><button class="btn">Ｂ組</button>');
　　　})
　　});
　</script>
　<style>
　　.inline
　　{
　　　display: inline;
　　}
　</style>
</body>
</html>