从 WordPress Woo 商务网站中删除具有特定值的 <select> 数组中的特定 <option> 标记答案

【问题标题】：Remove specific <option> tag from <select> array that has a specific value from a WordPress Woo commerce site从 WordPress Woo 商务网站中删除具有特定值的 <select> 数组中的特定 <option> 标记
【发布时间】：2021-01-21 12:48:48
【问题描述】：

我正在尝试从 WordPress Woo 商务网站中删除具有特定值的数组中的特定标签。当我在 Stackoverflows 代码 sn-p 中运行代码时，jquery 会按预期执行并工作，但在站点上它不会执行。更令人困惑的是，如果我将 jquery 粘贴到浏览器 > 检查器 > 控制台中，它还会执行并删除具有所需值的所需标签。

CMS：WORDPRESS - 主题：DIVI |页面构建器：Elementor CRM：Woo Commerce

jQuery(document).ready(function($) {
    if(window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
        $('#dehumidifier-hanger-size option[value="Large (Fits 1870 model)"]').remove();
        alert('AWESOME jquery is WORKING');
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>

【问题讨论】：

欢迎来到 Stack Overflow。您在控制台中看到任何错误吗？ WP 加载的是什么版本的 Jquery？为什么使用Query(document)？命名空间没有设置为jQuery()？
@Twisty 有错误，但没有任何特定于附加 jquery 的内容。检查的页面和
@Twisty 代码执行，因为我在页面加载时收到警报，但第 2 行没有执行：$('#dehumidifier-hanger-size option[value="Large (Fits 1870 model)" ]'）。消除（）;。所以 jquery(document)
这表明 Selector 由于某种原因未能选择元素。
@Twisty 这也是我的结论，但代码在粘贴到控制台时有效。哈哈。不确定干扰来自哪里。

标签： html jquery wordpress woocommerce

【解决方案1】：

我会尝试一些更宽松的东西。可能你说的太具体了。

jQuery(function($) {
  if(window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
    var el = $("#dehumidifier-hanger-size option[value^='Large']");
    console.log("Found Element", el[0]);
    el.remove();
  } else {
    console.log("Not the correct page.");
  }
});

如果您在控制台中看到undefined，那么您错过了选择。如果你看到<option...，你就打对了。

【讨论】：

当我将它粘贴到控制台时，代码执行时的结果相同，但是当我粘贴到 DIVI > 主题选项 > 集成时，代码不会执行，但脚本会显示在页面的顶部。
顺便说一句，我正在运行一个 if 条件语句，具体取决于页面 URL 索引。我已经编辑了我的原始代码 sn-p 以包含所有内容。
@HobartHobieMunsell 如果您在控制台中什么也看不到，这意味着您的 IF 语句是 FALSE 并且没有运行代码。

【解决方案2】：

你尝试过这样的事情吗？在大多数情况下使用load 事件处理程序可以解决问题，因为该字段可能是在ready 事件之后创建的，因此您会看到选择器通过控制台工作，但不在ready 处理程序内部。

jQuery( document ).ready( function($) {

  $( document ).on( 'load', function() {
    $('#dehumidifier-hanger-size option[value="Large (Fits 1870 model)"]').remove();
    alert('AWESOME jquery is WORKING');
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>

【讨论】：

不行 $( document ).on( 'load', function() {
@HobartHobieMunsell 您是否安装了子主题，或者您是否将代码保存在定制器中？
这是一个使用 DIVI > 主题选项> 集成的子主题。在 WP 管理仪表板中
让它在 Chrome/IE/FF/OPR 上工作，而不是 Safari。
在您的子主题中创建一个新的 JS 并将其排入队列。它应该是这样工作的。

【解决方案3】：

@twisted @vmank 使用 $('#id').on('load', 函数 - 删除所需的选项。在控制台中执行，但找不到所需的对象。返回未定义。显然整行即使代码语法正确，2 也放错地方了。你们能帮忙吗？

jQuery(function($) {
  $('#dehumidifier-hanger-size').on('load', function() {
    if (window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
      var el = $("#dehumidifier-hanger-size option[value^='Large']");
      console.log("Found Element", el[0]);
      el.remove();
    } else {
      console.log("Not the correct page.");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>

【讨论】：

如果您在控制台中看不到任何内容，则此代码未运行。您需要确定为什么此代码没有出现在您的源代码中，或者为什么它没有在其他代码上冒泡。

【解决方案4】：

@twisted @vmank 所以，好消息！！！让 jquery 在 Chrome/FF/IE/OPR 上工作！！！！坏消息：在 Safari 上不起作用。你们谁能指出我正确的方向吗？

顺便说一句，感谢您的所有帮助。真的很感激！！！

jQuery(document).ready(function($) {
    if(window.location.href.indexOf("1850-aprilaire-test") >= 0) {
        $( document ).on( 'click', '#dehumidifier-hanger-size', function()  {
                var el = $('#dehumidifier-hanger-size option[value^="Large"]');
                el.attr('disabled','disabled');
                console.log("Found Element", el[0]);
        });
        } else {
        console.log("Not the correct page.");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled" disabled="disabled">Large (Fits 1870 model)</option>
</select>

【讨论】：