WP Forms中如何精确匹配下拉选项文本并禁用指定选项？

要实现仅禁用文本完全匹配的选项，可以通过以下几种方法避免:contains的模糊匹配问题：

方法一：使用jQuery filter精确匹配文本 #

遍历所有option元素，只筛选出文本内容完全等于目标值的选项：

<script type="text/javascript">
(function( $ ) {
  'use strict';
  $(document).ready( function(){
    $('option').filter(function() {
      // trim()处理文本前后可能存在的空格，确保匹配准确性
      return $(this).text().trim() === 'America';
    }).attr('disabled', true);
  });
})(jQuery)
</script>

方法二：通过value属性精确选择（适合value与文本一致的场景） #

如果你的选项value属性和显示文本完全相同（比如示例中的America），可以直接用属性选择器，效率更高：

<script type="text/javascript">
(function( $ ) {
  'use strict';
  $(document).ready( function(){
    $('option[value="America"]').attr('disabled', true);
  });
})(jQuery)
</script>

方法三：批量禁用多个精确匹配的选项 #

如果需要一次性禁用多个选项（比如America和Europe），可以用数组存储目标文本，再通过includes判断：

<script type="text/javascript">
(function( $ ) {
  'use strict';
  $(document).ready( function(){
    // 定义需要禁用的选项文本列表
    const disabledOptions = ['America', 'Europe'];
    $('option').filter(function() {
      return disabledOptions.includes($(this).text().trim());
    }).attr('disabled', true);
  });
})(jQuery)
</script>

注意事项 #

如果WP Forms的下拉选项是动态加载的（比如通过AJAX异步获取），需要确保代码在元素渲染完成后执行。可以将代码放在WP Forms提供的wpforms_frontend_js钩子中，或者监听DOM变化事件来触发逻辑。

内容的提问来源于stack exchange，提问作者Simon_a6