I need help with JQuery and / or JS to Drop Down Dependent Menu

Question

I need help with JQuery and / or JS to Drop Down Dependent Menu

Navigation

#1 by (2 votes)

1

I'm developing a program where you have a drop down menu happy with the Monthly, Weekly or Daily values that are the periodicity in which a system task should be run. Ai has a second drop down menu that should contain options according to what was chosen in the first one. If it is monthly, it 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 in JS to clear the list) it was only managing to change from weekly to monthly, when the opposite was done, the day of the week did not was changed in any way, even the drop down values being correct.

Oh my boss suggested doing it in another way that is not even working which is what is below. Anyone have suggestions or can you point me to the errors 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><scripttype="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 />

php javascript jquery dropdown

asked by anonymous 04.03.2016 / 17:48

1 answer

What is the safest way to get errors in PHP? Array to solve hidden phrase puzzle

score 2 · Accepted Answer

Basically you've 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>");

I was wrong because when you used the double quotation marks " to group the value you closed the beginning of the string, replace the initial double quotation marks with single quotation marks ' to work 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

In all the times you tried to add an option in the select you used $.html only its deletes the previous content so only the last record would be in the options, it replaces the $.html with $.append that adds new ones elements in the selection keeping the previous ones.

Here is a working 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>PeriodicidadedaExecução</label><selectstyle="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>