​

<div class="col-md-6 col-12">

  <div>

    <select name="frequencyType" id="frequencyType" class="mdb-select md-form">

    <option value="">Please select</option>

    <option value="w" >Once a week</option>

    <option value="m" >Once a month</option>

    <option value="x" >Every 3 months</option>

    <option value="z" >Every 6 months</option>

    <option value="y" >Once a year</option>

  </select>

  <label for="frequencyType" class="mdb-main-label">Frequency:</label>

  </div>

  <div>

    <select name="frequencyAmount_w" id="frequencyAmount_w" class="mdb-select md-form" title=" ">

    <option value="">Please select</option>

    <option value="1" >Sun</option>

    <option value="2" >Mon</option>

    <option value="3" >Tue</option>

    <option value="4" >Wed</option>

    <option value="5" >Thu</option>

    <option value="6" >Fri</option>

    <option value="7" >Sat</option>

  </select>

  </div>

  <div>

    <select name="frequencyAmount_m" id="frequencyAmount_m" class="mdb-select md-form" title=" ">

    <option value="">Please select</option>

    <option value="1" >On day 1 of each month</option>

    <option value="2" >On day 2 of each month</option>

    <option value="3" >On day 3 of each month</option>

    <option value="4" >On day 4 of each month</option>

    <option value="5" >On day 5 of each month</option>

    <option value="6" >On day 6 of each month</option>

    <option value="7" >On day 7 of each month</option>

    <option value="8" >On day 8 of each month</option>

    <option value="9" >On day 9 of each month</option>

    <option value="10" >On day 10 of each month</option>

    <option value="11" >On day 11 of each month</option>

    <option value="12" >On day 12 of each month</option>

    <option value="13" >On day 13 of each month</option>

    <option value="14" >On day 14 of each month</option>

    <option value="15" >On day 15 of each month</option>

    <option value="16" >On day 16 of each month</option>

    <option value="17" >On day 17 of each month</option>

    <option value="18" >On day 18 of each month</option>

    <option value="19" >On day 19 of each month</option>

    <option value="20" >On day 20 of each month</option>

    <option value="21" >On day 21 of each month</option>

    <option value="22" >On day 22 of each month</option>

    <option value="23" >On day 23 of each month</option>

    <option value="24" >On day 24 of each month</option>

    <option value="25" >On day 25 of each month</option>

    <option value="26" >On day 26 of each month</option>

    <option value="27" >On day 27 of each month</option>

    <option value="28" >On day 28 of each month</option>

    <option value="29" >On day 29 of each month</option>

    <option value="30" >On day 30 of each month</option>

    <option value="31" >On day 31 of each month</option>

  </select>

  </div>

  <div>

    <div class="md-form input-with-post-icon datepicker " id="frequencyDateHolder">

      <input type="text" class="form-control"  name="frequencyDate" id="frequencyDate" placeholder="Choose date">

      <label for="example">Try me...</label>

    <i class="fas fa-calendar input-prefix"></i>

  </div>

  </div>

</div>

/*#frequencyAmount_m, 

#frequencyAmount_w, */

#frequencyDateHolder { display: none;}

​

$(document).ready(function() {

 $("#frequencyType").materialSelect();

  $("#frequencyType").change(function(){

    var frequencyType = $("#frequencyType option:selected").val();

    if (frequencyType=='w') {

      $("#frequencyAmount_m").hide().materialSelect({destroy: true});

      $("#frequencyDateHolder").hide();

      $("#frequencyAmount_w").show().addClass("mdb-select").materialSelect(); //.show().addClass("required");

    } else if (frequencyType =='m') {

      $("#frequencyAmount_w").hide().materialSelect({destroy: true});

      $("#frequencyDateHolder").hide();

      $("#frequencyAmount_m").show().addClass("mdb-select").materialSelect(); //.show().addClass("required");

    } else if (frequencyType =='y') {

      $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});

      $("#frequencyDateHolder").show();

      $("#frequencyDateHolder").datepicker();

      $('#frequencyDate').on('click', () => {

        $('i').trigger('click')

      });

      $("#frequencyDate").addClass("required");

    } else if ( (frequencyType =='z')|| (frequencyType =='x')) {

      $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});

      $("#frequencyDateHolder").show();

      $("#frequencyDateHolder").datepicker();

      $('#frequencyDate').on('click', () => {

        $('i').trigger('click')

      });

      $("#frequencyDate").attr('placeholder','Starting from date').addClass("required");

    }

​

  });

});

​

​