​

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

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

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

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

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

            </select>

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

              <select name="frequencyAmount_w" id="frequencyAmount_w" class=" 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>

              <select name="frequencyAmount_m" id="frequencyAmount_m" class=" 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>

                      <!--<option value="99" >last</option>-->

                </select>

                <div class="md-form"> 

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

        </div>

            </div>

#frequencyAmount_m, #frequencyAmount_w,  #frequencyDate { 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});

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

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

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

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

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

      }

  });

});