Tell me how to implement a drop-down list.

Here is my current implementation:

$('#sel').change(function() { if ($('#sel option:selected').hasClass("sel_1")) { $("#result").html(""); } else if ($("#sel option:selected").hasClass("sel_2")) { $("#result").html(""); } else if ($('#sel option:selected').hasClass("sel_3")) { $("#result").html(""); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="select_gr"> <select id="sel"> <option class="sel_1">Выберите</option> <option class="sel_2">ПКС-35</option> <option class="sel_3">ТМ-35</option> </select> </div> <div id="result"></div>

How can I, when I click on an option in select, output a table in result, and so that it can be styled in css?

  • What table should I display? From where - yolosora
  • Well, I need to create it and display it on the page only when I click on the PKS-35. - Think
  • So what is the table? If you do not know how to form a table based on the input data, then you are not asking about that. - yolosora
  • There will be a table with students in a group and their grades by subject. - Think
  • Then you’re definitely not asking about the format of the input data and with what the table should look like, ask a new question. - yolosora

1 answer 1

The logic is something like this:

 $(document).on('change', '#select_gr select[name="faculties"]', function() { let cur_fac = $(this).val(); switch (cur_fac) { // здесь, мы посылаем запрос Аяксом в php, // который вернет таблицу $.ajax({ url: '/getTable.php', type: 'POST' data: { fac_number: cur_fac } }).done(function(res) { // после чего вставляем html код в div с id="result" $('#result').html(res); }).fail(function(res) { alert('Произошла ошибка'); console.log(res); }) } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="select_gr"> <form> <select name="faculties" requared=""> <option value="0" disabled="" selected="">Выберите</option> <option value="1">ПКС-35</option> <option value="2">ТМ-35</option> </select> <input type="submit" value="Отправить"/> </form> </div> <div id="result"></div>