Показ части кода при выбранном пункте select

268

22 февраля 2017, 20:05

Есть следующий список:

<form action="users.php" method="post" name="dropdownlist">
    <p><select id="workname" size="1">
        <option disabled selected>Выберите интервал</option>
        <option>Неделя</option>
        <option>Месяц</option>
        <option>Неделя</option>
        <option>Выберите даты...</option>
        </select></p>
        <p><input type="submit" value="Выбрать"></p>
</form>

При выборе пункта "Выберите даты" должно появляться следущее:

<form name="form1" method="post" action="">
    С <input type="date" name="start_date" /> до <input type="date" name="end_date" />
    <input type="submit" value="Показать" size="40" name="godate">
</form>

Подскажите как реализовать пожалуйста

Answer 1

Изначально форму скрываете, на onchange выбора даты вешаете обработчик, который показывает или скрывает форму.

$(function(){ 
  $('#workname').change(function(){ 
    if ($(this).find('option:selected').data('type') == 'range') { 
      $('#hidden-form').removeClass('hidden'); 
    } else { 
      $('#hidden-form').addClass('hidden'); 
    } 
  }); 
});

.hidden { 
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="users.php" method="post" name="dropdownlist"> 
    <p><select id="workname" size="1"> 
        <option disabled selected>Выберите интервал</option> 
        <option>Неделя</option> 
        <option>Месяц</option> 
        <option>Неделя</option> 
        <option data-type="range">Выберите даты...</option> 
        </select></p> 
        <p><input type="submit" value="Выбрать"></p> 
</form> 
 
<form name="form1" id="hidden-form" method="post" action="" class="hidden"> 
    С <input type="date" name="start_date" /> до <input type="date" name="end_date" /> 
    <input type="submit" value="Показать" size="40" name="godate"> 
</form></div>