Скрыть параметр в поле выбора с помощью Jquery/Javascript

Я хочу скрыть только одну опцию в поле выбора, используя Jquery/Javascript. Я пробовал отображать CSS: none, но он работает не во всех браузерах, и я не могу напрямую редактировать параметр, чтобы добавить «скрытый» или аналогичный.

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

В первой раскрывающейся «категории» я пытаюсь скрыть опцию «аренда полосы». Который, как вы видите, имеет значение = "5", поэтому я попробовал следующий скрипт, но он не работает, если у вас есть какие-либо предложения, я был бы очень признателен.

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

Я также пробовал без идентификатора и все равно не повезло

$("option[value='5']").remove();
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
36
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вам не нужно экранировать цитату блока:

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>

Спасибо. Это все еще не удаляет его, хотя я вижу, что код работает правильно. Возможно, это запускает javascript до того, как загрузится форма бронирования книги?

Matt Cooper 02.04.2022 22:03

@MattCooper вполне возможно. Вам нужно запустить remove, когда параметры уже определены. Если мой фрагмент работает во всех ваших браузерах, то это работающее доказательство концепции, поэтому, если вы примените это к своей проблеме, и он не работает, то, вероятно, это алгоритмическая проблема, как вы уже подозревали.

Lajos Arpad 02.04.2022 22:17

Если вам нужна дополнительная помощь по вашей проблеме, то вам нужно будет предоставить более подробную информацию по вашему вопросу, так как с моей позиции невозможно догадаться, почему ваши варианты не существовали, когда вы пытались их удалить.

Lajos Arpad 02.04.2022 22:18

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

Рабочая рабочий пример https://codepen.io/hermes14/pen/VwyrXjr?editors=1111

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

Другие вопросы по теме