Trying to find a more efficient way to do multiple replaces without repeating the same code in jQuery

Question

I have a bunch of <select> s wrapped with #selector1 , #selector2 , #selector3 , etc. I also have a bunch of h1 wrapped with #data1 , #data2 , #data3 .

Each time the dropdown in each #selector is changed, it replaces the text in its respective #data . So for example changing the dropdown in #selector1 changes the text in #data1 .

For a better idea, here is my code:

 $("#selector1 .choose").on('change', function(e) { var titleName = $('#selector1 .choose').find(":selected").text(); $("#data1 .title").text(titleName); e.preventDefault(); }); $("#selector2 .choose").on('change', function(e) { var titleName = $('#selector2 .choose').find(":selected").text(); $("#data2 .title").text(titleName); e.preventDefault(); }); $("#selector3 .choose").on('change', function(e) { var titleName = $('#selector3 .choose').find(":selected").text(); $("#data3 .title").text(titleName); e.preventDefault(); }); 

 .title { font-size: 16px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selector1"> <select class="choose"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector2"> <select class="choose"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector3"> <select class="choose"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <!-- etc ... --> <div id="data1"> <h1 class="title"> Test 0 </h1> </div> <div id="data2"> <h1 class="title"> Test 0 </h1> </div> <div id="data3"> <h1 class="title"> Test 0 </h1> </div> <!-- etc ... --> 

As you can see, the jQuery is very inefficient. Because I have to repeat the same code over and over again, only changing the number for each selector.

What's a better, more efficient way to do this?

Answer 1

No need to duplicate the code like this, simply make it generic, bind by class, and access the values via $(this)... . You can use data attributes for the selector of h1 .

You can improve it like this:

 $(".choose").on('change', function(e) { var id = $(this).data('id'); var text = $(this).find(":selected").text(); $('#' + id + ' .title').text(text); e.preventDefault(); }); 

 .title { font-size: 16px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selector1"> <select class="choose" data-id="data1"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector2"> <select class="choose" data-id="data2"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector3"> <select class="choose" data-id="data3"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <!-- etc ... --> <div id="data1"> <h1 class="title"> Test 0 </h1> </div> <div id="data2"> <h1 class="title"> Test 0 </h1> </div> <div id="data3"> <h1 class="title"> Test 0 </h1> </div> <!-- etc ... --> 

Answer 2

  $(".choose").on('change', function(e) { var id = e.target.getAttribute('data-id'); var titleName = $(this).find(":selected").text(); $("#"+id+" .title").text(titleName); e.preventDefault(); }); 

 .title { font-size: 16px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selector1"> <select class="choose" data-id="data1"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector2" > <select class="choose" data-id="data2"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <div id="selector3" > <select class="choose" data-id="data3"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </div> <!-- etc ... --> <div id="data1"> <h1 class="title"> Test 0 </h1> </div> <div id="data2"> <h1 class="title"> Test 0 </h1> </div> <div id="data3"> <h1 class="title"> Test 0 </h1> </div> <!-- etc ... --> 

Answer 3

$('.choose').change(function() {
    var this_nr=$(this).parent().attr('id').substr(-1);     //get curent nr from parent id
    var this_val=$(this).val();                             //get value from curent select
    $('#data'+this_nr+' .title').text(this_val);            //add value to output
});