Реализация тега Select

203

14 мая 2018, 03:00

Подскажите как реализовать выпадающий список.

Вот моя текущая реализация:

$('#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>

Как мне при нажатии на option в select вывести в result таблицу, и чтобы её можно было стилизовать в css?

Answer 1

Логика примерно такая:

$(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>