The problem is such that when the user selects select a certain option, then a modal window appears or the attributes html

$(document).ready(function() { $("#act".select()).click(function() { $('#select').prepend('<option value="10">Добавить в самое начала Select</option>'); }); }); 
 #hideModal{ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form" id="form"> <label class="mr-sm-2" for="act">ДЕЙСТВИЯ</label> <select class="form-control form-control-md custom-select mb-2 mr-sm-2 mb-sm-0" name="act" id="act"> <option value="Срочно связаться" id="clickShow">Срочно связаться</option> <option value="01 ку">01 ку</option> <option value="02 02">02 02</option> <option value="03">03</option> </select> <div class="col-md-5" id="hideModal"> <div class="form-group"> <label for="content">История событий</label> <textarea class="form-control bg-field" id="content" name="historyEvent" rows="5"></textarea> </div> <div class="form-group"> <label for="calendar">Выберите дату:</label> <input type="date" class="form-control bg-field" id="calendar" name="calendar"> </div> <div class="form-group"> <label for="calendar">Выберите время:</label> <input name="time" class="form-control bg-field" type="time" name="calendar"/> </div> </div> </form>

I also tried it

  $(document).ready(function() { var act = $("#act").val(); var name = "03"; if (act == name) { $("#hideModal").show(); } });

    2 answers 2

    To catch the selection of an element, there is an onchange event.

     $(document).ready(function() { $("#act").change(function() { alert( $(this).val() ) }); }); 
     #hideModal { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form" id="form"> <label class="mr-sm-2" for="act">ДЕЙСТВИЯ</label> <select class="form-control form-control-md custom-select mb-2 mr-sm-2 mb-sm-0" name="act" id="act"> <option value="Срочно связаться" id="clickShow">Срочно связаться</option> <option value="01 ку">01 ку</option> <option value="02 02">02 02</option> <option value="03">03</option> </select> <div class="col-md-5" id="hideModal"> <div class="form-group"> <label for="content">История событий</label> <textarea class="form-control bg-field" id="content" name="historyEvent" rows="5"></textarea> </div> <div class="form-group"> <label for="calendar">Выберите дату:</label> <input type="date" class="form-control bg-field" id="calendar" name="calendar"> </div> <div class="form-group"> <label for="calendar">Выберите время:</label> <input name="time" class="form-control bg-field" type="time" name="calendar" /> </div> </div> </form>

    "#act".select() - can not be so treated. This does not exist. You can write $('#act:selected')

    • thank you very much what you need - Koly

    Firstly, I would use this:

     $(document).ready(function() { $("#act option").select(function() { $("#act").prepend('<option value="10">Добавить в самое начала Select</option>'); }); });

    only the option tag can be in the select state, therefore you need to apply to it. And you need to add the code to the beginning of the select tag, for which id = 'act', and you add to the beginning of some tag for which id = "select", I have not found this in your html code.