UmarAbbasKhan UmarAbbasKhan - 3 months ago 8
HTML Question

How to select <select> elements with no html in them through JQuery

I have following html select elements

<select id="options1" title="prd_name" name="options">
<option value="optiona">Option A</option>
<option value="optionb">Option B</option>
<option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"> </select>
<select id="options3" title="prd_name" name="options"> </select>
<select id="options4" title="prd_name" name="options"> </select>


Only the first select element with id="options1" has option tags in it, the rest of select elements are empty. I want to select those empty select elements so that I be able to populate options into them, without touching the first select element which already has options into it. How can I do this especially through Jquery?

Answer

You can use selector select:empty; alternatively you can use select:not(:has(option))

console.log($("select:empty"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select id="options1" title="prd_name" name="options">
  <option value="optiona">Option A</option>
  <option value="optionb">Option B</option>
  <option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"></select>
<select id="options3" title="prd_name" name="options"></select>
<select id="options4" title="prd_name" name="options"></select>