jquery - DRY Jquery 选择下拉显示 div

Question

好的，我有 4 到 5 个选择下拉菜单，它们做了一个简单的工作，每个下拉菜单显示不同的 div。代码重复了好几次，有什么方法可以创建一个函数并在不同的 Div 上调用它。感谢您的帮助。

        $('.select--one').change(function() {
            var var1 = $('.select--one option:selected').val();
            $('.one').removeClass('active');
            $('#' + var1 ).addClass('active');
        });

        $('.select--two').change(function() {
            var var2 = $('.select--two option:selected').val();
            $('.two').removeClass('active');
            $('#' + var2 ).addClass('active');
        });

        $('.select--three').change(function() {
            var var3 = $('.select--three option:selected').val();
            $('.three').removeClass('active');
            $('#' + var3 ).addClass('active');
        });

div {
    display: none;
}
div.active{
    display: block;
    margin:40px 40px 0 0;
    background : gold;
    width:100px;
    height: 100px;
    text-align:center;
    line-height:100px;
    float:left;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Show Selected Div </p> 

<select class="select--one">
   <option value="div-1">Div 1</option>
   <option value="div-2">Div 2</option>
   <option value="div-3">Div 3</option>
</select>

 <select class="select--two">
   <option value="div-4">Div 4</option>
   <option value="div-5">Div 5</option>
   <option value="div-6">Div 6</option>
</select>

 <select class="select--three">
   <option value="div-7">Div 7</option>
   <option value="div-8">Div 8</option>
   <option value="div-9">Div 9</option>
</select>

<br>

<div id="div-1" class="one active">div 1</div>
<div id="div-2" class="one">div 2</div>
<div id="div-3" class="one">div 3</div>

<div id="div-4" class="two active">div 4</div>
<div id="div-5" class="two">div 5</div>
<div id="div-6" class="two">div 6</div>

<div id="div-7" class="three active">div 7</div>
<div id="div-8" class="three">div 8</div>
<div id="div-9" class="three">div 9</div>

Answer 1

您可以使用一个 on-change 功能。使用数据属性，您可以为不同的选择字段选择 div。

希望这有帮助。

  
        $('select').change(function() {
            var varOrder = $(this).data('order');
            var var1 = $(this).val();
            $('.'+varOrder).removeClass('active');
            $('#' + var1 ).addClass('active');
        });

div {
    display: none;
}
div.active{
    display: block;
    margin:40px 40px 0 0;
    background : gold;
    width:100px;
    height: 100px;
    text-align:center;
    line-height:100px;
    float:left;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Show Selected Div </p> 

<select class="select--one" data-order="one">
   <option value="div-1">Div 1</option>
   <option value="div-2">Div 2</option>
   <option value="div-3">Div 3</option>
</select>

 <select class="select--two" data-order="two">
   <option value="div-4">Div 4</option>
   <option value="div-5">Div 5</option>
   <option value="div-6">Div 6</option>
</select>

 <select class="select--three" data-order="three">
   <option value="div-7">Div 7</option>
   <option value="div-8">Div 8</option>
   <option value="div-9">Div 9</option>
</select>

<br>

<div id="div-1" class="one active">div 1</div>
<div id="div-2" class="one">div 2</div>
<div id="div-3" class="one">div 3</div>

<div id="div-4" class="two active">div 4</div>
<div id="div-5" class="two">div 5</div>
<div id="div-6" class="two">div 6</div>

<div id="div-7" class="three active">div 7</div>
<div id="div-8" class="three">div 8</div>
<div id="div-9" class="three">div 9</div>