title: Append select box options dynamically with attributes
body: <p>I need to append extra data to my select box options. here is my code.</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;select id="questionNumber" class="form-control"&gt;
     &lt;option&gt;Select Number&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$.each(result.data, function (key, value) {
      $("#questionNumber").append($('&lt;option&gt;', {
          value: value.id,
          text: value.number
      }));
  });
  </code></pre>
  
  <p>So i can add value and text but i want to append attributes also to this appended option 
  like </p>
  
  <pre><code>data-marks = value.mark
  </code></pre>
  
  <p>So my expected result would be like</p>
  
  <pre><code>&lt;select id="questionNumber" class="form-control"&gt;
     &lt;option&gt;Select Number&lt;/option&gt;
     &lt;option value="170" data-mark="2"&gt;1&lt;/option&gt;
     &lt;option value="171" data-mark="3"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>What should i do for this?
  Thanks.</p>