CODEWITHSUNDEEP
javascriptjquery
LazyStuff
LazyStuff

Reputation: 41

How to select a specific option based on multiple attribute?

Suppose I have this select:

<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
    <optgroup label="criterio 2">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 1
        </option>
       <option value="2" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ffb700;&quot;> </span>CRITERIO 2 [51 - 60] - CRITERIO 2" id-criteria="2">CRITERIO 2
       </option>
       <option value="3" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#66ff00;&quot;> </span>CRITERIO 3 [61 - 100] - CRITERIO 2" id-criteria="2">CRITERIO 3
       </option>
     </optgroup>
</select>

I'm trying to select the option which have as id-criteria=2 and as value = 3, so I did:

$('.parameter-criteria[data-id=2]')
   .find('option[value=3]')
   .find('id-criteria', 2).prop('selected', true);

but this won't work, any idea?

Upvotes: 0

Views: 103

Answers (1)

Karan
Karan

Reputation: 12619

You can specify both criteria as .find('option[value=3][id-criteria=2]'). 

$('.parameter-criteria[data-id=2]')
   .find('option[value=3][id-criteria=2]')
   .prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select class="required form-control parameter-criteria" selectpicker="" data-id="2" tabindex="-98">
    <optgroup label="criterio 2">
        <option value="1" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ff0000;&quot;> </span>CRITERIO 1 [0 - 50] - CRITERIO 2" id-criteria="2">CRITERIO 1
        </option>
       <option value="2" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#ffb700;&quot;> </span>CRITERIO 2 [51 - 60] - CRITERIO 2" id-criteria="2">CRITERIO 2
       </option>
       <option value="3" data-content="<span class=&quot;badge-min filter d-inline-flex&quot; style=&quot;background-color:#66ff00;&quot;> </span>CRITERIO 3 [61 - 100] - CRITERIO 2" id-criteria="2">CRITERIO 3
       </option>
     </optgroup>
</select>

Upvotes: 1

Related Questions