How to select specific <option> tags in jQuery to transform into a Javascript Object

Question

I want to get the information below the first <option> tag, I want to use jQuery/Cheerio to extract the information and transform the end result into a dictionary. It would ideally look like this

const info = {
   '5.5':12773,
   '6':12774,
}

And it goes on till the end.

<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
  <option>Choose Your Size</option>
  <option value="12773" source="16004">5.5</option>
  <option value="12774" source="16006">6</option>
  <option value="12775" source="16008">6.5</option>
  <option value="14805" source="16010">7</option>
  <option value="14809" source="16012">7.5</option>
  <option value="12749" source="16014">8</option>
  <option value="14816" source="16016">8.5</option>
  <option value="14820" source="16018">9</option>
  <option value="14824" source="16020">9.5</option>
  <option value="15175" source="16022">10</option>
  <option value="15178" source="16024">10.5</option>
  <option value="15184" source="16028">11.5</option>
  <option value="15187" source="16030">12</option>
</select>

Answer 1

Well, if you want to do all of this in jQuery, you can simply get all of the option s of a select element with the jQuery selector ( $('#attributesize-size_uswomen option') ) and then perform a for loop ( $.each ) over it and fill your object easily.

So your final code should be something like this:

 var opts = $('#attributesize-size_uswomen option:not(:first)'); var info = {}; $.each(opts, function(index, opt) { info[$(opt).text()] = parseInt($(opt).val()) }); console.log(info);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select"> <option>Choose Your Size</option> <option value="12773" source="16004">5.5</option> <option value="12774" source="16006">6</option> <option value="12775" source="16008">6.5</option> <option value="14805" source="16010">7</option> <option value="14809" source="16012">7.5</option> <option value="12749" source="16014">8</option> <option value="14816" source="16016">8.5</option> <option value="14820" source="16018">9</option> <option value="14824" source="16020">9.5</option> <option value="15175" source="16022">10</option> <option value="15178" source="16024">10.5</option> <option value="15184" source="16028">11.5</option> <option value="15187" source="16030">12</option> </select>

NOTE: Since the opt itself in the loop will be a regular object to use the jQuery functions over it you need to make a jQuery object with $() operand otherwise you can use it as regular NODE object and get its properties with javascript built-in properties like text , textContent or value .

UPDATE

Since you receive an error in the implementation with cheerio which does not support :first pseudo-selector, so you can select all of the options then exclude the first one in the object creation.

 var opts = $('#attributesize-size_uswomen option'); var info = {}; $.each(opts, function(index, opt) { if (index != 0) info[$(opt).text()] = parseInt($(opt).val()) }); console.log(info);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select"> <option>Choose Your Size</option> <option value="12773" source="16004">5.5</option> <option value="12774" source="16006">6</option> <option value="12775" source="16008">6.5</option> <option value="14805" source="16010">7</option> <option value="14809" source="16012">7.5</option> <option value="12749" source="16014">8</option> <option value="14816" source="16016">8.5</option> <option value="14820" source="16018">9</option> <option value="14824" source="16020">9.5</option> <option value="15175" source="16022">10</option> <option value="15178" source="16024">10.5</option> <option value="15184" source="16028">11.5</option> <option value="15187" source="16030">12</option> </select>

Or if you want to keep up with the supported Cheerio approach you use this one:

 var info = {}; $('#attributesize-size_uswomen').children().slice(1).each(function() { info[$(this).text()] = parseInt($(this).val()) }); console.log(info);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select"> <option>Choose Your Size</option> <option value="12773" source="16004">5.5</option> <option value="12774" source="16006">6</option> <option value="12775" source="16008">6.5</option> <option value="14805" source="16010">7</option> <option value="14809" source="16012">7.5</option> <option value="12749" source="16014">8</option> <option value="14816" source="16016">8.5</option> <option value="14820" source="16018">9</option> <option value="14824" source="16020">9.5</option> <option value="15175" source="16022">10</option> <option value="15178" source="16024">10.5</option> <option value="15184" source="16028">11.5</option> <option value="15187" source="16030">12</option> </select>

Answer 2

Achieved using $("select option:not(:first)").each

CodePen