JavaScript to select all ≥250VAC (or ≥400VDC) capacitors on Arrow's website

arrow.com-250vac-capacitor-filter-selection.js

/**
 * Arrow's website is currently (2018-10) pretty bad at filtering for ranges of
 *  values in a component property. In this case I wanted to select every 
 *  capacitor with a voltage rating of at least 250V AC (or 400V DC). Arrow 
 *  lets you search for a specific value, but that would only let me easily 
 *  select, say, 250VAC capacitors, ignoring all of the 300VAC or 400VAC 
 *  capacitors, which would be equally suitable for my purposes.
 * This script uses some very simple regular expressions to compare the values
 *  in the <select name="Voltage"> box against an `AC_MIN` variable and a 
 *  `DC_MIN` variable, selecting that value if it's greater than either of 
 *  those. Because selecting all values that matched my limits resulted in the
 *  website spitting out an error, which I assumed was due to having too many 
 *  values selected, I added a third parameter: a minimum number of results for
 *  an option to return (the number in parentheses in a field option such as 
 *  "400VDC|250VAC (500)") in order for this script to select it. This can be 
 *  set down to 0 or 1 if the number of options in the <select> is fairly 
 *  small.
 * The script then triggers the 'change' event on the <select> so that the 
 *  filter form's Ajax runs to update the other fields.
 * NOTE: There is one limitation to this script: you must first select at least
 *  one filter property ("In Stock" isn't a bad choice, there), as that sort of
 *  "enables" the filter form. It was too small a limitation for me to bother 
 *  figuring out how to do that programmatically!
 *
 * Despite the fact that Arrow's website includes jQuery, I wrote this script
 *  in native JavaScript just for the fun of it, so that it doesn't require 
 *  jQuery. Of course, the jQuery equivalent would have been much shorter!
 *
 * Use on, e.g., this page: 
 *  https://www.arrow.com/en/products/search?subcat=Capacitors-sep-Fixed%20Capacitors
 *
 * To use, open the Developer Console (F12), go into the Console tab, and just
 *  paste the whole line of code into the console input field and hit Return. 
 *  You can modify the variables at the start to adjust the options that get 
 *  selected, or even entirely rewrite the tests that determine which options
 *  to select!
 *
 * I've only tested this in Chrome 70, but it should also work in Firefox, 
 *  probably recent versions of Safari, probably even Edge, maybe even IE10!
 *  (The jQuery version, below, has more chance of working in older browsers,
 *  as browser compatibility is part of what jQuery was created for.)
 */

var FIELD_NAME='Voltage',AC_MIN=250,DC_MIN=400,RESULT_MIN=10; var el=document.querySelector('select[name='+FIELD_NAME+']'),btn=document.querySelector('.Button.FilterContainer-apply'); if(btn.disabled){alert("Please select at least one filter property first (e.g. 'In Stock', maybe?), so that the 'APPLY' button turns red!");}else{ for(var i=0,l=el.options.length;i<l;i++){var o=el.options[i],use=false; if(o.disabled)continue; if(/(\d+)VAC/i.exec(o.value)){if(parseInt(RegExp.$1)>=AC_MIN){use=true;}} if(/(\d+)VDC/i.exec(o.value)){if(parseInt(RegExp.$1)>=DC_MIN){use=true;}} if(use){if(/\((\d+)\)/.exec(o.textContent)){if(parseInt(RegExp.$1)<RESULT_MIN){use=false;}}} if(use){o.selected=true;}} el.dispatchEvent(new Event('change',{bubbles:true})); }

// **** The above line is all that you need to copy for this script to work! 
// **** Below this is some alternative scripts just for reference.

// Here's a jQuery re-write of the above - actually not as much shorter as I'd expected! 684 chars instead of 750 of the original:
var FIELD_NAME='Voltage',AC_MIN=250,DC_MIN=400,RESULT_MIN=10; var el=jQuery('select[name='+FIELD_NAME+']'),btn=jQuery('.Button.FilterContainer-apply:disabled'),opts=el.find('option:not(:disabled)'); if(btn.length){alert("Please select at least one filter property first (e.g. 'In Stock', maybe?), so that the 'APPLY' button turns red!");}else{ opts.each(function(){ var use=false; if(/(\d+)VAC/i.exec(this.value)){if(parseInt(RegExp.$1)>=AC_MIN){use=true;}} if(/(\d+)VDC/i.exec(this.value)){if(parseInt(RegExp.$1)>=DC_MIN){use=true;}} if(use){if(/\((\d+)\)/.exec(this.textContent)){if(parseInt(RegExp.$1)<RESULT_MIN){use=false;}} if(use)this.selected=true;}}); el.trigger('change'); }

// And here's a pretty-printed version of the native-JS script for better readability!
var FIELD_NAME = 'Voltage',
    AC_MIN     = 250,
    DC_MIN     = 400,
    RESULT_MIN = 10;

var el  = document.querySelector('select[name=' + FIELD_NAME + ']'),
    btn = document.querySelector('.Button.FilterContainer-apply');

if (btn.disabled) {
    alert("Please select at least one filter property first (e.g. 'In Stock', maybe?), so that the 'APPLY' button turns red!");
} else {
    for (var i=0, l=el.options.length; i<l; i++) {
        var o = el.options[i],
            use = false;
        
        if (o.disabled) {
            continue;
        }
        
        if (/(\d+)VAC/i.exec(o.value)) {
            if (parseInt(RegExp.$1) >= AC_MIN) {
                use = true;
            }
        }
        
        if (/(\d+)VDC/i.exec(o.value)) {
            if (parseInt(RegExp.$1) >= DC_MIN) {
                use = true;
            }
        }
        
        if (use) {
            if (/\((\d+)\)/.exec(o.textContent)) {
                if (parseInt(RegExp.$1) < RESULT_MIN) {
                    use = false;
                }
            }
        }
        
        if (use) {
            o.selected = true;
        }
    }
    
    el.dispatchEvent(new Event('change', {bubbles: true}));
}