Clever Geek Handbook

How do I use the same function in different ways?

I have two dropdowns. When I select an option in the first dropdown, the values ​​of the second dropdown will change to match the first values ​​of the dropdown.

Html code

<select id="one">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="two">
    <option value="a">A</option>
    <option value="b">B</option>
</select>

JS CODE

$("#one").change(function () {
    if ($("#one").val() == 'a') {
        $("#two").val("b")
    } else if ($("#one").val() == 'b') {
        $("#two").val("a")
    }
});

$("#two").change(function () {
    if ($("#two").val() == 'a') {
        $("#one").val("b")
    } else if ($("#two").val() == 'b') {
        $("#one").val("a")
    }
});

Both codes for the two dropdown menus perform the same function. Is there an efficient way to make the code smaller? How do I declare a generic function and use it for both dropdowns (like prototype)?

Here's a JSFiddle .

+3


source to share


6 answers


  • Add common class

    to both dropdowns.
  • Bind change

    event to elements using generic class
  • Use siblings()

    to set value

    another dropdown
  • Use trigger()

    to update dropdown values ​​on page load.

Demo



$('.mySelect').on('change', function() {
  var newVal = $(this).val() == 'a' ? 'b' : 'a';
  $(this).siblings('.mySelect').val(newVal);

  // Even Shorter
  // $(this).siblings('.mySelect').val($(this).val() == 'a' ? 'b' : 'a');
}).trigger('change');
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="one" class="mySelect">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
<select id="two" class="mySelect">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
Run codeHide result


+5


source


Like this?



$('#one,#two').on('change', function() {
  var other = ( $(this).attr('id') == 'one' ) ? '#two' : '#one';
  
  var value = ( $(this).val() == 'a' ) ? 'b' : 'a';
  
  $(other).val(value);
});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="two">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
Run codeHide result


+1


source


Of course, there are many ways to do this:

function onChange($element, $other) {
  if($element.val() == 'a'){
    $other.val("b")
  }else if($other.val() == 'b'){
    $element.val("a")
  }
}

See here:

function onChange($element, $other) {
  if ($element.val() == 'a') {
    $other.val("b")
  } else if ($element.val() == 'b') {
    $other.val("a")
  }
}

$('#one, #two').change(function() {
  var other = $('#one, #two').not(this);
  onChange($(this), other);
})
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
<select id="two">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
Run codeHide result


0


source


Make it a function with two arguments to pass in the IDs of the dropdown:

$("#one").change(switchSelection("#two", "#one"));

$("#two").change(switchSelection("#one", "#two"));

function switchSelection(x, y) {
    if($(y).val() == 'a') {
        $(x).val("b")
    }
    else if ($(x).val() == 'b') {
        $(y).val("a");
    }
};
0


source


The simplest way (given your code) - although not the most efficient - would be to pass the selection items as parameters to a generic function call.

var handleChange = function($select, $linkedSelect){
    if($select.val() == 'a'){
        $linkedSelect.val("b")
    }else if($select.val() == 'b'){
        $linkedSelect.val("a")
    }
}; 

$("#one").change(function(){
    handleChange($(this),$('#two'));
});

$("#two").change(function(){
    handleChange($(this),$('#one'));
});

Here's a script for it in action.

0


source 


$('#one,#two').change(function() {
 var opositeIdObj = {"one":"two","two":"one"};
 var opositeValObj = {"a":"b","b":"a"};
 $("#"+opositeIdObj[this.id]).val(opositeValObj[this.value]);
}).trigger('change');
0


source






More articles:


All Articles