switch 语句在 JavaScript 中不起作用

Question

我遇到一个问题，其中一个 javascript 函数正在获取一个selectedMonth字符串 var，并且警报对话框显示该字符串的值，但由于某种原因 switch 语句不起作用。我在页面加载时遇到这个问题，它确实可以与<select>onchange 监听器一起使用。在这种情况下，我收到警报Dezember，但 switch 语句 december 没有被调用。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);    });

Answer 1

我想你需要的是一个事件监听器，当用户更改下拉列表时，你将调用不同的 api。这里我添加了事件监听器，当下拉菜单发生变化时，它会调用你的 showDropdown 函数。

$('.New_Plant_Month').change((e) => {

 showDropDown(e.target.value);

})

这是代码

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>

Answer 2

<select>我发现的唯一解决办法是在页面加载时通过 jquerychange侦听器以编程方式触发，否则永远var selectedMonth不会switch通过..如上面的 gif 屏幕截图所示。

无论如何，这是解决办法。

        $(document).ready(function () {

              .

              .

              .

            $('.New_Plant_Month')

                .trigger('change');

        });

Answer 3

请尝试此代码，切换语句在 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>

我希望这段代码对您有用。

Answer 4

代码的顺序必须有点不同 - 就像这样：

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>