JavaScript中switch语句无法工作

3
我遇到了一个问题,一个 javascript 函数获取一个字符串变量 selectedMonth,弹出对话框显示了这个字符串的值,但是 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);

    });

// 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>

预览 在此输入图像描述

ASP.NET Core代码

        <!-- 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>

你是如何调用函数的?是这样的吗:showDropDown('Dezember') - Nicholas Tower
2
你的代码可以正常工作...该函数创建了一个settings对象,但它没有对其进行任何操作,但代码会弹出正确的值-所有的url也都是无效的,但由于你没有使用url或设置中的任何内容,所以这不是问题。 - Bravo
它的代码片段现在可以工作了,顺便说一句,在页面加载时代码仍然无法工作。对我来说重要的是它不能在页面加载时工作。 - Amir Dora.
那是一个<select></select>?在我看来更像是一个<input type='text' /> - StackSlave
var months = { 'Januar': 1, 'Februar': 2, 'März': 3, 'April': 4, /*... add the rest of the months*/ } settings.url = "https://sslbeta.de/api/plantsearchapi/latest/"+months[selectedMonth]; - Dalorzo
显示剩余13条评论
4个回答

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>


onChange监听器正在工作,我在帖子中也提到了这一点,只是我没有发布那部分的代码。 - Amir Dora.

0

代码的顺序需要有所不同 - 就像这样:

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>


实际上我遇到的问题不是这个。我在 StackOverflow 上更新了代码,不小心把代码放在了循环内部。但它已经在循环外部了,所以那不是原因。顺便说一下,感谢你的时间。 - Amir Dora.

0
请尝试这段代码,JavaScript中的switch语句无法工作。
<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>

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

谢谢。


通常情况下,switch语句是有效的,但在我的情况下似乎不起作用。 - Amir Dora.

0

我发现唯一的解决方法是在页面加载时通过jquery change监听器以编程方式触发<select>,否则switch中的var selectedMonth永远不会被传递...如上面的gif截图所示。

无论如何,这里是解决方法。

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

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

        });

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接