如何在 jQuery 中选择特定的 <option> 标签以转换为 Javascript 对象

Posted 2023-05-09

【中文标题】如何在 jQuery 中选择特定的 <option> 标签以转换为 Javascript 对象

【英文标题】：How to select specific <option> tags in jQuery to transform into a Javascript Object

【发布时间】：2021-02-08 04:42:20

【问题描述】：

我想获取第一个<option> 标签下面的信息，我想使用jQuery/Cheerio 来提取信息并将最终结果转换为字典。理想情况下应该是这样的

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

它一直持续到最后。

<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>

【问题讨论】：

请记住，如果其中一个答案对您有用，请将其标记为答案，以帮助社区中的其他人在遇到相同问题时更轻松地找到他们的解决方案。 如果你不知道怎么做，你可以在答案旁边使用灰色标记（打勾）（你只能选择一个），更多信息请阅读this。否则，请告诉我们为什么所有提供的答案都不适合您。

@SMAKSS 我正在尝试在 Cheerio 中实施您的解决方案，目前收到此错误 (SyntaxError: unmatched pseudo-class :first)

好吧，cheerio 不支持 :first 伪选择器，我提供的答案仅适用于 jQuery，但要修复它，我建议使用另一种可能有用的方法，

你得出结论了吗？

@SMAKSS 是的，效果很好

【参考方案1】：

好吧，如果你想在 jQuery 中完成所有这些，你可以简单地使用 jQuery 选择器($('#attributesize-size_uswomen option')) 获取 select 元素的所有 options 和然后在其上执行一个 for 循环 ($.each) 并轻松填充您的对象。

所以你的最终代码应该是这样的：

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>

注意： 由于循环中的opt 本身将是一个常规对象，以便在其上使用jQuery 函数，您需要使用$() 操作数创建一个jQuery 对象，否则您可以使用它作为常规 NODE 对象，并使用 javascript 内置属性（如 text、textContent 或 value）获取其属性。

更新

由于您在使用cheerio which does not support :first 伪选择器的实现中收到错误，因此您可以选择所有选项然后在对象创建中排除第一个选项。

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>

或者，如果您想跟上受支持的 Cheerio 方法，请使用以下方法：

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>

【参考方案2】：

使用$("select option:not(:first)").each实现

CodePen