title: How to get the value of select tag with certain class and data attribute?
body: <pre><code>&lt;div id='participant-detail'&gt;
        &lt;select class="form-control quantity" data-short-name="8"&gt; 
        &lt;/select&gt;
  
        &lt;select class="form-control quantity" data-short-name="6"&gt; 
        &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In these given example, how am I supposed to get the value of the first select tag with the data-short-name of '8'?</p>
  
  <p>I tried </p>
  
  <pre><code>$('#participant-detail .quantity').find("select[data-short-name='8']").val()
  </code></pre>
  
  <p>the '#participant-detail' is the id of the container(div) of those 2 <strong>select</strong> tags. </p>
  
  <p>How to find or navigate to the specific tag and get its value? </p>
  
  <p>Giving it an id is not advisable because those <strong>select</strong> tags were created from some conditions.</p>