I am trying to make two dynamic selects, the first is the year and depending on the year that is chosen, it shows me the second select with the number of weeks.
2015 for example, has 53 weeks, and others have 52. try to put the second select with javascript and the for until the value of the year with a function to get the number of weeks, I don't know if that can be done, but it doesn't work for me working, what am I doing wrong?
echo '
</select>
</div>
<!-- tercera columna -->
<div class="col-md-3 col-sm-3">
<label for="selectYear">Selecciona año:</label>
<select name="selectYear" id="selectYear" class="selectpicker" data-size="7" data-live-search="true" required>';
for ($i=2015; $i < 2021 ; $i++):
if($i == date('Y')) {$selected = 'selected';} else {$selected = '';}
echo '<option value='.$i.' '.$selected.'>'.$i.'</option>';
endfor;
echo '</select>
</div>
<!-- segunda columna -->
<div class="col-md-3 col-sm-3">';
if($selector != 'adminHours'){
echo '<label>Selecciona semana</label>';
echo '<div id="selectY"></div>';
echo '<script>
$(\'#selectYear\').on(\'change\', function() {
var sel = $(\'#selectYear\').val();
function getISOWeeks(y) {
var d,
isLeap;
d = new Date(y, 0, 1);
isLeap = new Date(y, 1, 29).getMonth() === 1;
return d.getDay() === 4 || isLeap && d.getDay() === 3 ? 53 : 52
}
var numOfWeeks = getISOWeeks(sel);
console.log(numOfWeeks);
})
var myDiv = document.getElementById("selectY");
var selectList = document.createElement("select");
selectList.setAttribute("id", "selectWeek");
selectList.setAttribute("name", "selectWeek");
selectList.setAttribute("class", "selectpicker");
selectList.setAttribute("data-live-search", "true");
myDiv.appendChild(selectList);
for (var i = 1; i < numOfWeeks; i++) {
var option = document.createElement("option");
option.setAttribute("value", [i]);
option.text = [i];
selectList.appendChild(option);
}
</script>';
I leave you an example using jQuery and the Moments.js date management library