title: Javascript - Get custom attribute of each selectpicker selected value
body: <p>I receive an array of objects which are the selected options of a bootstrap selectpicker using <code>var roles = $(&quot;#adminUserRoles&quot;).find(&quot;option:selected&quot;);</code>. I would like to loop over each item in roles and get a custom attribute <code>data-value</code> however no matter what I try I can't seem to get each item as an object, I rather get it as a chunk of html.</p>
  <p>Edit: I iterate the set using</p>
  <pre><code>roles.each(function(item, index){
                  console.log(item.attr('data-value');
                  console.log(roles[index].attr('data-value')
              });
  </code></pre>
  <p>and receive <code>Uncaught TypeError: item.attr is not a function</code></p>
  <p>HTML:</p>
  <pre><code>&lt;select class=&quot;selectpicker&quot; multiple=&quot;&quot; data-live-search=&quot;true&quot; id=&quot;adminUserRoles&quot; name=&quot;roles&quot; title=&quot;Current Role(s)&quot; data-value=&quot;post&quot; tabindex=&quot;-98&quot;&gt;
     &lt;optgroup label=&quot;Group 2&quot;&gt;
        &lt;option name=&quot;User&quot; value=&quot;User&quot; data-value=&quot;Group 2&quot;&gt;User&lt;/option&gt;
     &lt;/optgroup&gt;
     &lt;optgroup label=&quot;Group 1&quot;&gt;
         &lt;option name=&quot;User&quot; value=&quot;User&quot; data-value=&quot;Group 1&quot;&gt;User&lt;/option&gt;
     &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>