how to make Jq script on Pardot shorten and more efficient

Question

I wrote this code to make a dropdown menu set a class value on selection in order to know what I selected to make it red when a selection is required.

The thing is that it is Pardot and I can't change the HTML. this is what I have a (the class was set by me)

p.Environment select option

The class changes for each dropdown The value is a number set by Pardot

any chance I can make this code just one function to work for all 3 dropdown but recognizing the dropdown I click?

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

AKX · Accepted Answer · 2020-05-12T12:48:23.370

1

Something like this oughta do the trick.

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: Or, more clearly perhaps, wrapping the logic in a real named function and just calling it thrice:

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");

edited May 12 '20 at 12:48

answered May 10 '20 at 19:57

AKX

152,115
15
115
172

Wow !!! that was fast and accurate, thank you very much, would you be kind to explain in words the principle behind it so I could learn, or maybe share a link about this method - Thanks again – Ziv Feldman May 11 '20 at 14:29
It's just shoving the two values that vary in the otherwise identical segments in an array, and iterating over them. – AKX May 11 '20 at 16:41
Ok but how does it know what dropdown I am editing and how it chooses the correct optionsAndDrops and not just changing all of the them? – Ziv Feldman May 12 '20 at 07:03
Thanks for the effort, so if we call it 3 times how come it only happens once and to the specific dropdown I choose? – Ziv Feldman May 12 '20 at 14:59
Because we pass in the specific dropdown and class as parameters. – AKX May 13 '20 at 06:08

how to make Jq script on Pardot shorten and more efficient

1 Answers1