使用 Jquery / Javascript 在 Select 框中隐藏选项

Question

我希望使用 Jquery/Javascript 在 select 框中仅隐藏一个选项。我已尝试 CSS 显示：none 但它不适用于所有浏览器，我无法直接编辑选项以添加“隐藏”或类似内容。

https://impactdigitaldev.co.uk/bookly/

在第一个下拉“类别”中，我试图隐藏“车道租用”选项。您可以看到它有一个 value="5"，所以我尝试了以下脚本，但它不起作用，如果您有任何建议，我将不胜感激。

$("#cats option[value='5']").remove();

我也试过不带ID，还是不行

$("option[value='5']").remove();

Answer 1

您不需要转义引用块：

document.querySelector("option[value='5']").remove();

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
<select>

Answer 2

$("select option[value='5']").remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0">Category</option>
   <option value="1">coaching</option>
   <option value="5">lane hire</option>
</select>

工作fiddle https://codepen.io/hermes14/pen/VwyrXjr?editors=1111

Answer 3

$("#cats option[value='5']").remove();

有效，但您的控制台中有一个未捕获的类型错误，这可能是脚本无法正常运行的原因运行。

正如您在下面的屏幕截图中看到的那样，我运行您在浏览器控制台中的代码段，导致选项被删除。

如果您有兴趣，这可以通过常规 javascript 轻松处理：

document.querySelector("#cats option[value='5']").remove();

<div class="bookly-form-group" id="cats" data-type="category">
<label>Category</label> 
  <div>
    <select>
      <option value="0">Category</option>
      <option value="1">coaching</option>
      <option value="5">lane hire</option>
    </select>
  </div> 
</div>

使用 Jquery / Javascript 在 Select 框中隐藏选项

Hide Option within Select box using Jquery / Javascript

javascript

jquery

select