プルダウンで値を取得した数値の〇番目にclass属性を付与させたい

Question

今、下記のようにBOXを５つ作りました。

<div class="test active">BOX1</div> <div class="test">BOX2</div> <div class="test">BOX3</div> <div class="test">BOX4</div> <div class="test">BOX5</div> 最初はＢＯＸ1にactiveが入っています。 これをプルダウンで選択した番目にactiveを移動させたいですが、 どのように記述すれば良いのでしょうか？

下記がソースになります。

<div style="margin:10px 0;">
 <select name="page" id="select_detail" class="select_detail_index1" style="font-size: 26px;">
    <option value="1">1番目</option>
    <option value="2">2番目</option>
    <option value="3">3番目</option>
    <option value="4">4番目</option>
    <option value="5">5番目</option>
</select>
</div>
<div class="test active">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>


<script>
$('select').change(function() {
var val = this.value;
alert( val ); 
**$('.test'). toggleclass('active');**　←ここが分からないです。
});
</script>

Comments

[kei344]

（質問文は編集できます）質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

すみませんでした。。。教えて頂きありがとうございます。

Answer 1

$( 'select' ).change( function() {
    var val = this.value;
    console.log( val ); // デベロッパーツールを使うように
    $( '.test' ).removeClass( 'active' ).eq( val - 1 ).addClass( 'active' );
} );
```**動くサンプル：**[https://jsfiddle.net/eLc917a3/](https://jsfiddle.net/eLc917a3/)

Comments

[退会済みユーザー]

ありがとうございました。
対応できました。

Answer 2

<style>
.active{background-Color:red}
</style>
<script>
$(function(){
  $('select').on('change',function() {
    var idx = parseInt($(this).val())-1
    $('.test').removeClass('active').eq(idx).addClass('active');
    });
});
</script>
<select name="page" id="select_detail" class="select_detail_index1">
<option value="1">1番目</option>
<option value="2">2番目</option>
<option value="3">3番目</option>
<option value="4">4番目</option>
<option value="5">5番目</option>
</select>
<div class="test active">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>