使用 Jquery / Javascript 隐藏选择框中的选项

发布于 2025-01-18 23:15:49 字数 444 浏览 0 评论 0原文

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

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

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

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

我也试过没有ID，但还是不行

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

原文

I'm looking to hide just one option within a select box using Jquery/Javascript. I've tried CSS to display: none but it doesn't work on all browsers and I can't edit the option directly to add "hidden" or similar.

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

In the first drop-down "category" I'm trying to hide the "lane hire" option. Which you can see has a value="5" so I've tried the following script but it's not working if you have any suggestions I'd be really grateful.

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

I also tried without the ID and still no luck

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北斗星光 2025-01-25 23:15:50

您不需要转义块引用：

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>

You don't need to escape the block quote:

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>

回复收藏 0 原文

抱着落日 2025-01-25 23:15:50

$("#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>

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

Does work, you've got an uncaught type error in your console though which probably is why the script doesn't run.

As you can see in the screenshot below I ran your snippet in the browser console, resulting in a removed option.

In case you are interested, this can be easily handled through regular javascript as such:

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>

回复收藏 0 原文

熊抱啵儿 2025-01-25 23:15:49

$("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>

工作小提琴
httpps://codepen.io/herm/herm/hermes14/pen/pen/pen/pen/vwyrxjr?editors = >

$("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>

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

回复收藏 0 原文

~没有更多了~