I need help with Jquery and/or JS for dependent Drop Down Menu

Question

I am developing a program where there is a drop down menu that matches the Monthly, Weekly or Daily values that are the periodicity in which a system task must be executed. Ai has a second drop down menu that should contain options according to what was chosen in the first. If it is monthly, displays from 0 to 31, weekly displays from Sunday to Saturday and daily is empty.

I had done this with Divs, but when making changes (even using a remove() function on JS to clear the list) he was only able to change from weekly to monthly, when otherwise it was done, the day of the week was not altered in any way, even the drop down values are correct.

Then my boss suggested to do another way that is even working which is what is below. Does anyone have suggestions or can point out the mistakes please?

Script and HTML below

<style type="text/css" media="all">
@import url("http://www.'.$_SESSION['p_url'].'css/cs_style_frm.css");
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function () {
       $("#tipoPeriodo").change(function() {
       $( "option", "#diaPeriodo" ).remove()
       if ($(this).val() == "m") {
          for (var i=1; i<=31; i++){
            $(#diaPeriodo).html = ("<option value="+i+">+i+<option>");
          }
       } 
       if ($(this).val() == "s"){
          $("#diaPeriodo").html("<option value="1">Segunda-feira</option>"); 
          $("#diaPeriodo").html("<option value="2">Terça-feira</option>"); 
          $("#diaPeriodo").html("<option value="3">Quarta-feira</option>"); 
          $("#diaPeriodo").html("<option value="4">Quinta-feira</option>"); 
          $("#diaPeriodo").html("<option value="5">Sexta-feira</option>"); 
          $("#diaPeriodo").html("<option value="6">Sábado</option>"); 
          $("#diaPeriodo").html("<option value="7">Domingo</option>"); 
       } 
       if ($(this).val == "d"){
          $("#diaPeriodo").html("<option value="0"> </option>"); 
       }    
    });
});
</script>'

<label>Dia de Execução <label><br />
<select style="width:150px;" id="diaPeriodo" name="diaPeriodo"></select><br /> 

Answer 1

Basically you made some basic javascript errors, follow them below:

$( "option", "#diaPeriodo" ).remove()  // foi substituido por $("#diaPeriodo").empty();

---

$(#diaPeriodo).html = ("<option value="+i+">+i+<option>"); 
// foi substituido por $("#diaPeriodo").append('<option value="' + i + '">' + i + '</option>');
// Pois o mesmo não funcionaria visto que as concatenações estavam erradas

---

The Block:

$("#diaPeriodo").html("<option value="1">Segunda-feira</option>"); 
$("#diaPeriodo").html("<option value="2">Terça-feira</option>"); 
$("#diaPeriodo").html("<option value="3">Quarta-feira</option>"); 
$("#diaPeriodo").html("<option value="4">Quinta-feira</option>"); 
$("#diaPeriodo").html("<option value="5">Sexta-feira</option>"); 
$("#diaPeriodo").html("<option value="6">Sábado</option>"); 
$("#diaPeriodo").html("<option value="7">Domingo</option>"); 

was wrong because when you used double quotes " to group value you closed the beginning of the string, replace the opening double quotes with single quotes ' to work see example below:

$("#diaPeriodo").append('<option value="1">Segunda-feira</option>');
$("#diaPeriodo").append('<option value="2">Terça-feira</option>');
$("#diaPeriodo").append('<option value="3">Quarta-feira</option>');
$("#diaPeriodo").append('<option value="4">Quinta-feira</option>');
$("#diaPeriodo").append('<option value="5">Sexta-feira</option>');
$("#diaPeriodo").append('<option value="6">Sábado</option>');
$("#diaPeriodo").append('<option value=7">Domingo</option>');

---

if ($(this).val == "d"){ // Faltou o os parenteses val() é uma function

---

Every time you tried to add an option in select you used $.html only that the respective deletes the previous content so only the last record would be in the options, replaces the $.html for $.append adding new elements in the selection while retaining the previous ones.

---

Below is a functional example of what you intended to do:

$(document).ready(function() {

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

    $("#diaPeriodo").empty();

    if ($(this).val() == "m") {
      for (var i = 1; i <= 31; i++) {
        $("#diaPeriodo").append('<option value="' + i + '">' + i + '</option>');
      }
    }

    if ($(this).val() == "s") {
      $("#diaPeriodo").append('<option value="1">Segunda-feira</option>');
      $("#diaPeriodo").append('<option value="2">Terça-feira</option>');
      $("#diaPeriodo").append('<option value="3">Quarta-feira</option>');
      $("#diaPeriodo").append('<option value="4">Quinta-feira</option>');
      $("#diaPeriodo").append('<option value="5">Sexta-feira</option>');
      $("#diaPeriodo").append('<option value="6">Sábado</option>');
      $("#diaPeriodo").append('<option value=7">Domingo</option>');
    }

    if ($(this).val() == "d") {
      $("#diaPeriodo").append('<option value="0">Será executado diariamente...</option>');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<label>Periodicidade da Execução
</label>
<select style="width:200px;" id="tipoPeriodo" name="tipoPeriodo">
  <option>Selecione...</option>
  <option value="m">Mensalmente</option>
  <option value="s">Semanalmente</option>
  <option value="d">Diariamente</option>
</select>
<br />
<label>Intervalo de Execução
</label>
<select style="width:200px;" id="diaPeriodo" name="diaPeriodo">
</select>