Как скрыть опцию от выбора с помощью jquery или javascript

У меня есть два следующих поля выбора

<select id = "first" onchange = "hideShowOptions(this.value)">
    <option value = "1">1</option>
    <option value = "2">2</option>
    <option value = "3">3</option>
    <option value = "4">4</option>
</select>

а также

<select id = "second" >
    <option value = "5">5</option>
    <option value = "6">6</option>
    <option value = "7">7</option>
    <option value = "8">8</option>
</select>

и следующий мой сценарий

function hideShowOptions(selectedValue) {
    if (selectedValue == 1 || selectedValue == 2 || selectedValue == 3) {
        $('#second').children('option[value = "8"]').css('display','none');
    } else {
        $('#second').children('option[value = "8"]').css('display','inline');
    }
}

Он правильно устанавливает style = "display: none" в соответствии с приведенным выше кодом, но этот параметр не скрыт от пользовательского интерфейса, и я все еще могу его увидеть.

Цель состоит в том, чтобы скрыть определенную опцию из выбора second на основе значения, выбранного из выбора first.

Возможный дубликат: stackoverflow.com/questions/1271503/…

— 17.09.2018 12:29

Я бы рекомендовал вам вместо этого установить атрибут disabled, чтобы он работал во всех браузерах. Или создайте копию вашего выбора и удалите фактический <option> из DOM.

— 17.09.2018 12:31

@GaryThomas, у меня не сработало

— 17.09.2018 12:32

@gugateider, пожалуйста, дайте дополнительную информацию, если возможно.

— 17.09.2018 12:33

одна минута, поменяю ваш код за вас

— 17.09.2018 12:34

@gugateider конечно, большое спасибо

— 17.09.2018 12:36

codepen.io/gugateider/pen/qMJBGL Я бы не стал использовать скрытие и показ, оставив его отключенным, чтобы улучшить взаимодействие с пользователем.

— 17.09.2018 12:38

Возможный дубликат Скрыть параметры в списке выбора с помощью jQuery

— 17.09.2018 12:40

@gugateider Большое спасибо. это решило мою проблему.

— 17.09.2018 12:41

javascript jquery drop-down-menu

17.09.2018 12:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 120

Ответы 2

Ниже приводится ответ: любезно предоставлено gugateider.

function hideShowOptions(selectedValue){
    if (selectedValue == 1 || selectedValue == 2 || selectedValue == 3)
    {
        $('#second').children('option[value = "8"]').attr('disabled', ''); // if doesn't support will just disable
      //   $('#second').children('option[value = "8"]').hide(); // if supports will hide
    }else{
        $('#second').children('option[value = "8"]').removeAttr('disabled'); // if doesn't support will just enable
        //$('#second').children('option[value = "8"]').show(); // if it supports, it will display
    }

}

17.09.2018 12:42

<select id = "first" onchange = "hideShowOptions(this.value)">
                              <option value = "1">1</option>
                              <option value = "2">2</option>
                              <option value = "3">3</option>
                              <option value = "4">4</option>
 </select>

function hideShowOptions(x) {

var hideTrigger = [1, 2 ,3];

switch (x){
case hideTrigger[0].toString():
$('#second').children('option[value = "8"]').css('display','none');
break;
case hideTrigger[1].toString():
$('#second').children('option[value = "8"]').css('display','none');
break;
case  hideTrigger[2].toString():
$('#second').children('option[value = "8"]').css('display','none');
break;
default:
$('#second').children('option[value = "8"]').css('display','block');
}
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "first" onchange = "hideShowOptions(this.value)">
                              <option value = "1">1</option>
                              <option value = "2">2</option>
                              <option value = "3">3</option>
                              <option value = "4">4</option>
                            </select>
                            
                            <select id = "second" >
                              <option value = "5">5</option>
                              <option value = "6">6</option>
                              <option value = "7">7</option>
                              <option value = "8">8</option>
                            </select>

Вы должны объяснить свой ответ. Ознакомьтесь с нашим Кодексом поведения: stackoverflow.com/conduct

— 17.09.2018 13:01

17.09.2018 12:59