title: 'DOMException: Failed to execute 'querySelectorAll' on 'Element' when using an 'option:selected' selector
body: <p>I'm running a page which throws an error at the following line:</p>
  
  <pre><code>var label = $select.find('option:selected').html() || $select.find('option:first').html() || "";
  </code></pre>
  
  <p>For the sake of completeness, here is the full jQuery function (<code>country-select.js</code>):</p>
  
  <pre><code>(function($) {
    $.fn.countrySelect = function (callback) {
      $(this).each(function(){
        var $select = $(this);
  
        var lastID = $select.data('select-id'); // Tear down structure if Select needs to be rebuilt
  
        if (lastID) {
          $select.parent().find('span.caret').remove();
          $select.parent().find('input').remove();
  
          $select.unwrap();
          $('ul#select-options-'+lastID).remove();
        }
  
        // If destroying the select, remove the selelct-id and reset it to it's uninitialized state.
        if(callback === 'destroy') {
          $select.data('select-id', null).removeClass('initialized');
          return;
        }
  
        var uniqueID = Materialize.guid();
        $select.data('select-id', uniqueID);
        var wrapper = $('&lt;div class="select-wrapper"&gt;&lt;/div&gt;');
        wrapper.addClass($select.attr('class'));
        var options = $('&lt;ul id="select-options-' + uniqueID +'" class="dropdown-content select-dropdown country-select"&gt;&lt;/ul&gt;'),
            selectChildren = $select.children('option, optgroup'),
            valuesSelected = [],
            optionsHover = false;
  
        var label = $select.find('option:selected').html() || $select.find('option:first').html() || "";
  
        // Function that renders and appends the option taking into
        // account type and possible image icon.
        var appendOptionWithIcon = function(select, option, type) {
          // Add disabled attr if disabled
          var disabledClass = (option.is(':disabled')) ? 'disabled ' : '';
          var optgroupClass = (type === 'optgroup-option') ? 'optgroup-option ' : '';
  
          var classes = option.attr('class');
          var data = option.data('phone-code');
  
          var opt = '&lt;li class="' + disabledClass + optgroupClass + '"&gt;&lt;span&gt;';
  
          if (option.val() !== '') {
            opt += '&lt;b class="flag flag-' + option.val().toLowerCase() + '"&gt;&lt;/b&gt;';
          }
          opt += '&lt;span class="option-label"&gt;' + option.html() + '&lt;/span&gt;';
          if (data &amp;&amp; data !== '') {
            opt += '&lt;small&gt;' + data + '&lt;/small&gt;';
          }
          opt += '&lt;/span&gt;&lt;/li&gt;';
  
  
          options.append($(opt));
        };
  
        /* Create dropdown structure. */
        if (selectChildren.length) {
          selectChildren.each(function() {
            if ($(this).is('option')) {
              appendOptionWithIcon($select, $(this));
            } else if ($(this).is('optgroup')) {
              // Optgroup.
              var selectOptions = $(this).children('option');
              options.append($('&lt;li class="optgroup"&gt;&lt;span&gt;' + $(this).attr('label') + '&lt;/span&gt;&lt;/li&gt;'));
  
              selectOptions.each(function() {
                appendOptionWithIcon($select, $(this), 'optgroup-option');
              });
            }
          });
        }
  
        options.find('li:not(.optgroup)').each(function (i) {
          $(this).click(function (e) {
            // Check if option element is disabled
            if (!$(this).hasClass('disabled') &amp;&amp; !$(this).hasClass('optgroup')) {
              var selected = true;
  
              options.find('li').removeClass('active');
              $(this).toggleClass('active');
              $newSelect.val($(this).find('.option-label').text());
  
              activateOption(options, $(this));
              $select.find('option').eq(i).prop('selected', selected);
              // Trigger onchange() event
              $select.trigger('change');
              if (typeof callback !== 'undefined') callback();
            }
  
            e.stopPropagation();
          });
        });
  
        // Wrap Elements
        $select.wrap(wrapper);
        // Add Select Display Element
        var dropdownIcon = $('&lt;span class="caret"&gt;&amp;#9660;&lt;/span&gt;');
        if ($select.is(':disabled'))
          dropdownIcon.addClass('disabled');
  
        // escape double quotes
        var sanitizedLabelHtml = label.replace(/"/g, '&amp;quot;');
  
        var $newSelect = $('&lt;input type="text" class="select-dropdown" readonly="true" ' + (($select.is(':disabled')) ? 'disabled' : '') + ' data-activates="select-options-' + uniqueID +'" value="'+ sanitizedLabelHtml +'"/&gt;');
        $select.before($newSelect);
        $newSelect.before(dropdownIcon);
  
        $newSelect.after(options);
        // Check if section element is disabled
        if (!$select.is(':disabled')) {
          $newSelect.data('constrainwidth', false)
          $newSelect.dropdown({'hover': false, 'closeOnClick': false});
        }
  
        // Copy tabindex
        if ($select.attr('tabindex')) {
          $($newSelect[0]).attr('tabindex', $select.attr('tabindex'));
        }
  
        $select.addClass('initialized');
  
        $newSelect.on({
          'focus': function (){
            if ($('ul.select-dropdown').not(options[0]).is(':visible')) {
              $('input.select-dropdown').trigger('close');
            }
            if (!options.is(':visible')) {
              $(this).trigger('open', ['focus']);
              var label = $(this).val();
              var selectedOption = options.find('li').filter(function() {
                return $(this).find('.option-label').text().toLowerCase() === label.toLowerCase();
              })[0];
              activateOption(options, selectedOption);
            }
          },
          'click': function (e){
            e.stopPropagation();
          }
        });
  
        $newSelect.on('blur', function() {
          $(this).trigger('close');
          options.find('li.selected').removeClass('selected');
        });
  
        options.hover(function() {
          optionsHover = true;
        }, function () {
          optionsHover = false;
        });
  
        // Make option as selected and scroll to selected position
        var activateOption = function(collection, newOption) {
          if (newOption) {
            collection.find('li.selected').removeClass('selected');
            var option = $(newOption);
            option.addClass('selected');
            options.scrollTo(option);
          }
        };
  
        // Allow user to search by typing
        // this array is cleared after 1 second
        var filterQuery = [],
            onKeyDown = function(e){
              // TAB - switch to another input
              if(e.which == 9){
                $newSelect.trigger('close');
                return;
              }
  
              // ARROW DOWN WHEN SELECT IS CLOSED - open select options
              if(e.which == 40 &amp;&amp; !options.is(':visible')){
                $newSelect.trigger('open');
                return;
              }
  
              // ENTER WHEN SELECT IS CLOSED - submit form
              if(e.which == 13 &amp;&amp; !options.is(':visible')){
                return;
              }
  
              e.preventDefault();
  
              // CASE WHEN USER TYPE LETTERS
              var letter = String.fromCharCode(e.which).toLowerCase(),
                  nonLetters = [9,13,27,38,40];
              if (letter &amp;&amp; (nonLetters.indexOf(e.which) === -1)) {
                filterQuery.push(letter);
  
                var string = filterQuery.join(''),
                    newOption = options.find('li').filter(function() {
                      return $(this).text().toLowerCase().indexOf(string) === 0;
                    })[0];
  
                if (newOption) {
                  activateOption(options, newOption);
                }
              }
  
              // ENTER - select option and close when select options are opened
              if (e.which == 13) {
                var activeOption = options.find('li.selected:not(.disabled)')[0];
                if(activeOption){
                  $(activeOption).trigger('click');
                  $newSelect.trigger('close');
                }
              }
  
              // ARROW DOWN - move to next not disabled option
              if (e.which == 40) {
                if (options.find('li.selected').length) {
                  newOption = options.find('li.selected').next('li:not(.disabled)')[0];
                } else {
                  newOption = options.find('li:not(.disabled)')[0];
                }
                activateOption(options, newOption);
              }
  
              // ESC - close options
              if (e.which == 27) {
                $newSelect.trigger('close');
              }
  
              // ARROW UP - move to previous not disabled option
              if (e.which == 38) {
                newOption = options.find('li.selected').prev('li:not(.disabled)')[0];
                if(newOption)
                  activateOption(options, newOption);
              }
  
              // Automaticaly clean filter query so user can search again by starting letters
              setTimeout(function(){ filterQuery = []; }, 1000);
            };
  
        $newSelect.on('keydown', onKeyDown);
      });
  
      function toggleEntryFromArray(entriesArray, entryIndex, select) {
        var index = entriesArray.indexOf(entryIndex),
            notAdded = index === -1;
  
        if (notAdded) {
          entriesArray.push(entryIndex);
        } else {
          entriesArray.splice(index, 1);
        }
  
        select.siblings('ul.dropdown-content').find('li').eq(entryIndex).toggleClass('active');
  
        // use notAdded instead of true (to detect if the option is selected or not)
        select.find('option').eq(entryIndex).prop('selected', notAdded);
        setValueToInput(entriesArray, select);
  
        return notAdded;
      }
  
      function setValueToInput(entriesArray, select) {
        var value = '';
  
        for (var i = 0, count = entriesArray.length; i &lt; count; i++) {
          var text = select.find('option').eq(entriesArray[i]).text();
  
          i === 0 ? value += text : value += ', ' + text;
        }
  
        if (value === '') {
          value = select.find('option:disabled').eq(0).text();
        }
  
        select.siblings('input.select-dropdown').val(value);
      }
    };
  
    $(function() {
      $('.js-country-select').countrySelect();
    });
  
    $(document).on('change', '[data-country-select]', function() {
      var target = 'select' + $(this).data('country-select');
      var val = $(this).val();
      var label = 'State';
      var options = [
        '&lt;option value="" selected="" disabled=""&gt;Select State&lt;/option&gt;'
      ];
  
      if (val !== '') {
        var country = window.__COUNTRIES[val];
        var subdivisions = country.subdivisions;
        var keys = Object.keys(subdivisions);
  
        label = country.subdivisionName;
        options = [
          '&lt;option value="" selected="" disabled=""&gt;Select ' + label + '&lt;/option&gt;'
        ];
  
        keys = keys.sort(function(a, b) {
          var valA = subdivisions[a].toLowerCase();
          var valB = subdivisions[b].toLowerCase();
  
          if (valA &lt; valB) return -1;
          if (valA &gt; valB) return 1;
  
          return 0;
        });
  
        keys.forEach(function(key) {
          options.push('&lt;option value="' + key + '"&gt;' + subdivisions[key] + '&lt;/option&gt;');
        });
  
        $(target).removeAttr('disabled');
      } else {
        $(target).attr('disabled', 'disabled');
      }
  
      $(target).parents('.input-field').find('label').html(label);
      $(target).val('').html(options);
      $(target).select2();
    });
  })(jQuery);
  </code></pre>
  
  <p>Here is the exception that I see in debug mode:</p>
  
  <p><a href="https://i.stack.imgur.com/Pk1X4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pk1X4.jpg" alt="enter image description here"></a></p>
  
  <p>From what I understand from <a href="https://stackoverflow.com/questions/32305687/failed-to-execute-queryselectorall-on-element-in-extjs-5">Failed to execute &#39;querySelectorAll&#39; on &#39;Element&#39; in ExtJS 5</a>, <a href="https://api.jquery.com/selected-selector/" rel="nofollow noreferrer"><code>:selected</code></a> is not part of the CSS specification.</p>
  
  <p>How should I fix this? Should I use:</p>
  
  <pre><code>var label = $select.find('option').filter(':selected').html() || $select.find('option').filter(':first').html() || "";
  </code></pre>
  
  <p>?</p>