CODEWITHSUNDEEP
javascript
Amir Dora.
Amir Dora.

Reputation: 2707

switch statement not working in javascript

I am experiencing an issue where a javascript function, is getting a var selectedMonth which is a string, and the alert dialog is showing the value of the string but for some reason the switch statement is not working. I am experiencing this issue on page load, it does work with <select> onchange listener.

in this case, i get alert Dezember but switch statement december doesn't get called.

function showDropDown(selectedMonth) {

  alert(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}

    $(".New_Plant_Month").change(function () {

        // Fetching Value
        var month = $(this).val();
        showDropDown(month);

    });

// show months
$(document).ready(function() {


  var month = $(".New_Plant_Month  option:selected").text() + "";
  showDropDown(month);

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));
}

  


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month">
</select>

Preview enter image description here

asp.net core code

        <!-- asp-items="New plant SelectList"-->
        <div class="form-group">

            <label asp-for="NewPlantMonth" class="control-label">Neue Pflanzen</label>
            <!-- asp-items="NewsSelectList"-->
            <select class="form-control Shoplist New_Plant_Month" onchange="showDropDown(this.value)" data-search="true" asp-for="NewPlantMonth">
                <option value="NewPlantMonth"> @{var selectedValue = Model.NewPlantMonth != null ? Model.NewPlantMonth : "Bitte Monat auswählen"; } @selectedValue </option>
</select>

<span asp-for="NewPlantMonth" class="text-danger"></span>
        </div>

Upvotes: 3

Views: 713

Answers (4)

Amir Dora.
Amir Dora.

Reputation: 2707

The only fix i found to this was to trigger<select> via jquery change listener programmatically on page load otherwise the var selectedMonth in switch never passed.. as shown in above gif screenshot.

anyways here is the fix.

        $(document).ready(function () {
              .
              .
              .

            $('.New_Plant_Month')
                .trigger('change');

        });

Upvotes: 0

Bilhasry Ramadhony
Bilhasry Ramadhony

Reputation: 362

I guess what you need is an event listener, when user change the dropdown, you will call different api. Here I add event listener, when the dropdown change it will call your showDropdown function.

$('.New_Plant_Month').change((e) => {
 showDropDown(e.target.value);
})

Here is the code

function showDropDown(selectedMonth) {

console.log(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}


// show months
$(document).ready(function() {

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));
}
  var month = $(".New_Plant_Month  option:selected").text() + "";

showDropDown(month);

  $('.New_Plant_Month').change((e) => {
     showDropDown(e.target.value);
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month"></select>

Upvotes: 1

Makwana Prahlad
Makwana Prahlad

Reputation: 969

Please try this code, To switch statement not working in javascript

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var grade = 'C';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               break;
            
               case 'B': document.write("Pretty good<br />");
               break;
            
               case 'C': document.write("Passed<br />");
               break;
            
               case 'D': document.write("Not so good<br />");
               break;
            
               case 'F': document.write("Failed<br />");
               break;
            
               default:  document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

I hope this code will be useful to you.

Thank you.

Upvotes: 0

V.Volkov
V.Volkov

Reputation: 739

The order of codes gotta be a bit different - like that:

function showDropDown(selectedMonth) {

  alert(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}


// show months
$(document).ready(function() {

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));

  }

var month = $(".New_Plant_Month  option:selected").text() + "";
  showDropDown(month);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month"></select>

Upvotes: 0

Related Questions