How to get the value of select tag with certain class and data attribute?

Question

<div id='participant-detail'>
      <select class="form-control quantity" data-short-name="8"> 
      </select>

      <select class="form-control quantity" data-short-name="6"> 
      </select>
</div>

In these given example, how am I supposed to get the value of the first select tag with the data-short-name of '8'?

I tried

$('#participant-detail .quantity').find("select[data-short-name='8']").val()

the '#participant-detail' is the id of the container(div) of those 2 select tags.

How to find or navigate to the specific tag and get its value?

Giving it an id is not advisable because those select tags were created from some conditions.

Simplify by combining the first selector with the second? Loop over the selected elements? — evolutionxbox, May 22 '19 at 09:35
`find()` looks at the children of an element, so you don't need it here. Just add the attribute selector to the end of the class: `$('#participant-detail .quantity[data-short-name='8']").val()` — Rory McCrossan, May 22 '19 at 09:36
`$('#participant-detail .quantity')` this is already the `select` — Eddie, May 22 '19 at 09:36

Nikhil Aggarwal · Answer 1 · 2019-05-22T09:38:55.993

0

$('#participant-detail .quantity').find("select[data-short-name='8']") does not return any element as there is no child of #participant-detail .quantity selector with matching criteria select[data-short-name='8'].

You can try following approach to get the desired result.

console.log($('#participant-detail').find("select[data-short-name='8']").val());
console.log($('#participant-detail select.quantity[data-short-name="8"]').val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
      <select class="form-control quantity" data-short-name="8"> 
      <option value="a">A</option>
      </select>

      <select class="form-control quantity" data-short-name="6"> 
        <option value="b">B</option>
      </select>
</div>

edited May 22 '19 at 09:38

answered May 22 '19 at 09:35

Nikhil Aggarwal

28,197
4
43
59

This only returns the first element? – evolutionxbox May 22 '19 at 09:36
That's what the OP is asking for. – Rory McCrossan May 22 '19 at 09:37
@RoryMcCrossan my bad. That's me not reading well. – evolutionxbox May 22 '19 at 09:39

score 0 · Answer 2 · answered May 22 '19 at 09:37

0

use document.getElementById to select the div then querySelector to select the first child

let elem = document.getElementById('participant-detail').querySelector('select[data-short-name="8"]');
console.log(elem)

<div id='participant-detail'>
  <select class="form-control quantity" data-short-name="8">
  </select>

  <select class="form-control quantity" data-short-name="6">
  </select>
</div>

answered May 22 '19 at 09:37

brk

48,835
10
56
78

You're not using jQuery which the OP asked for. – evolutionxbox May 22 '19 at 09:38

Mamun · Accepted Answer · 2019-05-22T09:55:06.297

find() tries to find the select element inside $('#participant-detail .quantity') which itself is the element. Thus find() fails to target the element.

You do not need to use find(), you can specify the attribute selector as part of the main selector:

var val = $('#participant-detail select.quantity[data-short-name=8]').val();
console.log(val);
var val2 = $('#participant-detail select.quantity[data-short-name=6]').val();
console.log(val2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
    <select class="form-control quantity" data-short-name="8"> 
      <option value="1111">1111</option>
      <option value="2222" selected>2222</option>
    </select>

    <select class="form-control quantity" data-short-name="6">
      <option value="1111" selected>1111</option>
      <option value="2222">2222</option>
    </select>
</div>

How to get the value of select tag with certain class and data attribute?

3 Answers3