DRY Jquery选择下拉菜单show 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函数。使用data attr，您可以为不同的选择字段选择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>

​

Answer 2

我猜你可以这样做：

​

$('select').change(function() {
  var div = $('option:selected', this).val();
  $('select').not(this).val(0); // reset the other selects but this
  $('div').removeClass('active');
  $('#' + div).addClass('active');
});

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

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

<select>
  <option value="0">select...</option>
  <option selected value="div-1">Div 1</option>
  <option value="div-2">Div 2</option>
  <option value="div-3">Div 3</option>
</select>

<select>
  <option value="0">select...</option>
  <option value="div-4">Div 4</option>
  <option value="div-5">Div 5</option>
  <option value="div-6">Div 6</option>
</select>

<select>
  <option value="0">select...</option>
  <option value="div-7">Div 7</option>
  <option value="div-8">Div 8</option>
  <option value="div-9">Div 9</option>
</select>


<div id="div-1" class="active">div 1</div>
<div id="div-2">div 2</div>
<div id="div-3">div 3</div>
<div id="div-4">div 4</div>
<div id="div-5">div 5</div>
<div id="div-6">div 6</div>
<div id="div-7">div 7</div>
<div id="div-8">div 8</div>
<div id="div-9">div 9</div>

​

Answer 3

是的，你可以用this的方式来做：

$('.select--one, .select--two, .select--three').change(function() {
    var val = $(this).val();
    $('div').removeClass('active');
    $('#' + val ).addClass('active');
});

代码片段

​

$('.select--one, .select--two, .select--three').change(function() {
  var val = $(this).val();
  $('div').removeClass('active');
  $('#' + val ).addClass('active');
});

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

<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>


<div id="div-1" class="active">div 1</div>
<div id="div-2">div 2</div>
<div id="div-3">div 3</div>
<div id="div-4">div 4</div>
<div id="div-5">div 5</div>
<div id="div-6">div 6</div>
<div id="div-7">div 7</div>
<div id="div-8">div 8</div>
<div id="div-9">div 9</div>

​