There multselekt and hidden unit. It is required to show the block if a certain option is selected. And back to hide it, if the desired option is removed from the sample.

I go around the selected option and check them on val. But something is wrong ... If you choose one by one, when all three options are selected, the block is hidden for some reason.

jQuery('.js-select').on('change', function(){ jQuery(this).find('option:selected').each(function(){ if( jQuery(this).val() == "Второй"){ jQuery('p').show(); } else { jQuery('p').hide(); } }); }); 
 select { width: 150px; } p { display: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select class="js-select" name="add-programm[]" multiple="multiple"> <option value="Первый">Первый</option> <option value="Второй">Второй</option> <option value="Третий">Третий</option> </select> <p>Скрытый блок</p>

  • Are you sure that it is urgently necessary for you? The same can be just separate buttons, if already select is provided in the form of a large block with options. - OPTIMUS PRIME
  • @OPTIMUSPRIME already done everything on selects (. And it almost works, it seems) - Grigory

4 answers 4

 $('.js-select').on('change', function(){ if($(this.selectedOptions).is('[value="Второй"]')){ $('p').show(); }else{ $('p').hide(); } }); 
 select { width: 150px; } p { display: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select class="js-select" name="add-programm[]" multiple="multiple"> <option value="Первый">Первый</option> <option value="Второй">Второй</option> <option value="Третий">Третий</option> </select> <p>Скрытый блок</p>

    If there is exactly one paragraph, you can add the showing class only on those elements that should show it. And when you click to check for the presence of a class option ... so it will be more optimal than in the script to compare with the value == option line and in case of change - to go into the script again to change.

    So:

     $(document).on('click', '.boo', function(){ $('#moo').hide(); if( $(this).hasClass('show') ){ $('#moo').show(); } }); 
     #moo {display:none;} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select" name="add-programm[]" multiple="multiple"> <option class="boo show">Первый</option> <option class="boo show">Второй</option> <option class="boo">Третий</option> </select> <p id="moo">1111</p>

    And if there are a lot of paragraphs, you can show the right one, according to the clicked:

     $(document).on('click', '.boo', function(){ const index = $('.boo').index(this);//получили номер кликнутого элемента $('.moo').hide();//сперва скрыли все параграфы $('.moo').eq(index).show();//по полученному номеру - показали нужный }); 
     .moo {display:none;} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select" name="add-programm[]" multiple="multiple"> <option class="boo">Первый</option> <option class="boo">Второй</option> <option class="boo">Третий</option> </select> <p class="moo">1111</p> <p class="moo">2222</p> <p class="moo">3333</p>

      The check is very simple - we are looking for the option on the jQuery selector - option:selected , take value $option.val() and check:)

      For example:

       const $block = $('p') $('.js-select').on('change', function () { let $option = $(this).find(':selected') let method = $option.val() $block[method]() }) 
       select { width: 150px; } p { display: none; } 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select class="js-select" multiple="multiple"> <option value="hide">Первый</option> <option value="show">Второй</option> <option value="hide">Третий</option> </select> <p>Скрытый блок</p>

        First, in any case, we will hide the element when changing the selection

        And then we will show if among selected there are necessary (necessary) elements

         jQuery('.js-select').on('change', function() { jQuery('p').hide(); jQuery(this).find('option:selected').each(function() { if (this.value == "Второй") jQuery('p').show(); }); }); 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select class="js-select" name="add-programm[]" multiple="multiple"> <option value="Первый">Первый</option> <option value="Второй">Второй</option> <option value="Третий">Третий</option> </select> <p style="display:none">Скрытый блок</p>