如何使Pardot上的Jq脚本更短、更高效？

Question

我写了这段代码，让一个下拉菜单在选择时设置一个类值，以便知道我选择了什么，使其在需要选择时变成红色。

问题是，它是Pardot，我不能改变HTML.这是我有一个（类是由我设置）。

p.Environment select option 

每一个下拉菜单的类别都会发生变化该值是由Pardot设置的一个数字。

任何机会，我可以使这段代码只是一个函数工作的所有3个下拉，但识别下拉我点击？

<script>
// ---------Environment Dropdown Error-----------
(function() {
var selectedOption = 'option815221';
var drop = '.Environment';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
// ---------Country Dropdown Error-----------
(function() {
var selectedOption = 'option815237';
var drop = '.country';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
// ---------State Dropdown Error-----------
(function() {
var selectedOption = 'option824913';
var drop = '.state';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
</script>

Answer 1

类似这样的东西应该可以做到。

var optionsAndDrops = [
  ["option815221", ".Environment"],
  ["option815237", ".country"],
  ["option824913", ".state"],
];
optionsAndDrops.forEach(([selectedOption, drop]) => {
  $(drop).addClass(selectedOption);
  $(drop + " select").change(function() {
    $(drop)
      .removeClass(selectedOption)
      .addClass("option" + $(this).val());
    selectedOption = "option" + $(this).val();
  });
});

EDIT: 或者，更清楚的是，将逻辑封装在一个真正的命名函数中，然后调用三次即可。

function setupDropdown(drop, selectedOption) {
  $(drop).addClass(selectedOption);
  $(drop + " select").change(function() {
    $(drop)
      .removeClass(selectedOption)
      .addClass("option" + $(this).val());
    selectedOption = "option" + $(this).val();
  });
}

setupDropdown(".Environment", "option815221");
setupDropdown(".country", "option815237");
setupDropdown(".state", "option824913");