Dependent Picklist On vf Page

Question

In vf page on form I created a two picklist field: 1st one is date picklist and another one is days picklist.

example when we click on days only days value will be displayed like 66 77 88 etc. when we click on months then 3,4,5,etc. will be displayed.

so for that i tried but its not working

here is my code:

<div class="form-group-inline">                   
    <select class="custom-select custom-select-lg select-duration" id="term">                                       
           </select>
<select class="custom-select custom-select-lg select-duration" style="width: 47.5%;" id="term_type" required = "true">
                  <option value="">Select</option>
                  <option value="Days">Days</option>
                  <option value="Month">Months</option>
                  <option value="Year">Years</option>
                </select>
              </div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', onEntityInfoLoad);
                var duration = $('.term_type');
                duration.click(durationOnclick);
                function durationOnclick(){
                    $('#term_type').on('change', function(){
                        var selectDays = { "1": "66", "1": "77" ,"1": "88" ,"1": "99" ,"1": "110" ,"1": "121" ,"1": "132" ,"1": "143" ,
                                          "1": "154" ,"1": "165","1": "176","1": "187","1": "198"}
                        var selectMnths ={"3": "2","4": "2","5": "2","6": "2","7": "2","8": "2","9": "2","10": "2"
                                          var selectYear ={"1": "3"};
                        alert("hello");   
                        $.each(selectValues, function(key, value) {   
                            $('#term')
                            .append($("<option></option>")
                                    .attr("value",key)
                                    console.log("value");
                            console.log("key");
                            .text(value)); 
                        }
                               }
                               }

                </script>

Answer 1

Pasting the JavaScript into http://jshint.com/ results in 26+ errors being reported. By inspection selectValues looks undefined.

Fix the code so JSHint is happy and then test using your browser's Developer Tools.