Блог

Главная - Вопросы по программированию - Как сделать так, чтобы при выборе одного варианта отображался один вариант и скрывался другой

Как сделать так, чтобы при выборе одного варианта отображался один вариант и скрывался другой

#javascript #jquery

#javascript #jquery

Вопрос:

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

Я пытался использовать функцию $ attr(), и я думаю, что использую ее правильно, но мой метод не работает

 $(document).ready(function(){
    $("#main_dropdown").change(function(){
        let selectedMajor = $(this).children("option:selected").val();
        if (selectedMajor.trim() == 'arts') {
            $("div.custom_select_business").attr("display", "none");
            $('h3').removeAttr('id');
            $("div#hide").removeAttr('id');
            $("div.custom_select_art").removeAttr('id');
        }
        else if (selectedMajor.trim() == 'business') {
            $('h3').removeAttr('id');
            $("div#hide").removeAttr('id');
            $("div.custom_select_business").removeAttr('id');
        }
    });
});

Я ожидал, что он скроет выпадающее меню «бизнес», когда я выбрал «художественное», но выпадающее меню «Искусство» просто появляется, и больше ничего не происходит.

Комментарии:

1. Вам не хватает какого-то кода в конце, который не копировался? Потому что при этом отсутствуют некоторые конечные скобки и круглые скобки.

2. Ах, я только скопировал вставил немного своего кода, чтобы донести суть. Я обновлю его.

3. Это также может помочь иметь ваш HTML-код, просто для дальнейшего уточнения. Однако я обнаружил, что если я попытаюсь создать простейший пример функции, которую я пытаюсь использовать в пространстве, например CodePen.com , я нахожу решение самостоятельно, особенно если речь идет об устранении неполадок. Я бы помог больше, за исключением того, что в данный момент я могу использовать только свое мобильное устройство.

Ответ №1:

Вот так, это должно делать то, что вы описали, сделайте основной выбор, и если это искусство, покажет искусство, если это бизнес, покажет бизнес, в противном случае скроет оба.

КОД >>

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title></title>
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
  </script>
  </head>
  <body>

    <div id="main" class="main" style="display:block;">
      <label for="artsSelect">main selection</label>
      <select class="mainSelect" name="">
        <option value="hi"> hi </option>
        <option value="arts">arts</option>
        <option value="business">business</option>
      </select>
    </div>

    <div id="arts" class="arts" style="display:none;">
      <label for="artsSelect">Arts selection</label>
      <select class="artsSelect" name="">
        <option value="hi"> hi </option>
        <option value="hello">hello</option>
        <option value="foo">foo</option>
      </select>
    </div>

    <div id="business" class="business" style="display:block;">
      <label for="businessSelect">Business selection</label>
      <select class="businessSelect" name="">
        <option value="hi"> hi </option>
        <option value="hello">hello</option>
        <option value="foo">foo</option>
        <option value="bah">bah</option>
      </select>
    </div>
  </body>

  <script type="text/javascript">
    $().ready(function(){
      $('.mainSelect').change(function(){
        if($('.mainSelect').val() == "arts"){
          $('#arts').show();
          $('#business').hide();
        }else if($('.mainSelect').val() == "business"){
          $('#arts').hide();
          $('#business').show();
        }else{
          $('#arts').hide();
          $('#business').hide();
        }
      });
    });
  </script>
</html>