Оптимизация моего JavaScript с помощью функции

Question

У меня есть несколько списков выбора, которые я использую для заполнения текстовых полей с идентификаторами. поэтому вы нажимаете опцию выбора, и другое текстовое поле заполняется его идентификатором.

только с одной парой выбора / идентификатора это работает нормально, но у меня есть кратные значения, и единственное, что меняется, - это идентификатор выбора и ввода. На самом деле только конечные изменения, все входы начинаются с featredproductid все идентификаторы начинаются с recipesproduct, а затем оба заканчиваются категорией.

я знаю, что перечислять это снова и снова для каждой категории - это не способ сделать это. я думаю, что мне нужно сделать массив категорий var cats = ['оливковое масло', "зерна", "макароны"] а затем использовать функцию forEach? может быть?

вот неуклюжий код

window.addEvent('domready', function() {
    $('recipesproductoliveoil').addEvent('change', function(e){
       pidselected = this.options[this.selectedIndex].getProperty('value') ;
   $("featuredproductidoliveoil").setProperties({
       value: pidselected}); ;
    });
       $('recipesproductgrains').addEvent('change', function(e){
           pidselected = this.options[this.selectedIndex].getProperty('value') ;
       $("featuredproductidgrains").setProperties({
           value: pidselected}); ;
        });
      $('recipesproductpasta').addEvent('change', function(e){
          pidselected = this.options[this.selectedIndex].getProperty('value') ;
      $("featuredproductidpasta").setProperties({
          value: pidselected}); ;
       });
    $('recipesproductpantry').addEvent('change', function(e){
        pidselected = this.options[this.selectedIndex].getProperty('value') ;
    $("featuredproductidpantry").setProperties({
        value: pidselected}); ;
     });

});

Имейте в виду, что это Mootools 1.1 (нет, я не могу обновить его извините). я уверен, что это что-то базовое, что-то, что у меня, кажется, обволакивает мой мозг. но я совершенно уверен, что делать это, как указано выше, не очень хорошо ...

Answer 1

Ты рядом. Вот как вы могли бы это сделать:

var cats = ['oliveoil', 'grains', 'pasta'];
for (i in cats) {
    addChangeFunction(cats[i]);
}

function addChangeFunction(name) {
    $('recipesproduct' + name).addEvent('change', function(e) {
        pidselected = this.options[this.selectedIndex].getProperty('value');
        $('featuredproductid' + name).setProperties({
            value: pidselected
        });
    });
}

Answer 2

Как-то так может помочь:

 function bindSelectFeature(select, featured) {
    $(select).addEvent('change', function(e){
        pidselected = this.options[this.selectedIndex].getProperty('value') ;
        $(featured).setProperties({
          value: pidselected
        });
     });
  });
  bindSelectFeature('recipesproductpasta','featuredproductidpasta');