How to select Option value with Ajax data return?

Question

I have the following HTML code:

<select id="priorities-info" class="form-control selectpicker" data-live-search="true" disabled="" tabindex="-98">
    <option value="1" data-tokens="Alta">Alta</option>
    <option value="2" data-tokens="Média">Média</option>
    <option value="3" data-tokens="Baixa">Baixa</option>
</select>

I’m trying to compare the data-tokens this way:

$('#priorities-info').each(function() {
    $(this).attr('selected', this.dataset.tokens == responseData.Type);
});

But I’m not getting it, does anyone have any idea?

Answer 1

In the selector I believe you should include options and check if the attribute value data-tokens is the same as returned by ajax:

$('#priorities-info option').each(function() {
  if ( $(this).attr('data-tokens') == 'Média')
    $(this).prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="priorities-info" class="form-control selectpicker" data-live-search="true" tabindex="-98">
    <option value="1" data-tokens="Alta">Alta</option>
    <option value="2" data-tokens="Média">Média</option>
    <option value="3" data-tokens="Baixa">Baixa</option>
</select>