Question

这是我使用spring mvc

的jsp片段

 <form:select path="noOfBankDetails" id = "noOfBankDetails">
 <form:option value="0">0</form:option>
 <form:option value="1">1</form:option>
 <form:option value="2">2</form:option>
 <form:option value="3">3</form:option>
 <form:option value="4">4</form:option>
 </form:select>

 <!-- All the following divs are hidden -->
 <div id = "firstBankDetail"> 
<div id = "secondBankDetail">
<div id = "thirdBankDetail">
<div id = "fourthBankDetail">

这是我的jQuery代码段，它显示下拉noOfBankDetails更改时的所有div

  $("#noOfBankDetails").change(function(){
           $("#firstBankDetail").show();
           $("#secondBankDetail").show();
           $("#thirdBankDetail").show();
           $("#fourthBankDetail").show();
        });

它完美无缺......但我想要实现不同的东西伪的是这样的

IF noOfBankDetails IS 0 THEN 
    Show none of divs
ELSE IF noOfBankDetails IS 1 THEN 
    Show div firstBankDetail
ELSE IF noOfBankDetails IS 2 THEN 
    Show div firstBankDetail
    Show div secondBankDetail
and so on..

我应该如何在jQuery中执行此操作。我是jQuery的初学者。请提供一些指导。

Answer 1

jQuery if else是JavaScript if else FYI，无论如何：

 $("#noOfBankDetails").change(function(){
  if (this.value == 0) {
      //do 0 stuff
  } else if (this.value == 1) {
      //do 1 stuff
  } else if (value == 2) {
      //do 2 stuff
  }
 });

或开关：

$("#noOfBankDetails").change(function(){
    switch(this.value) {
        case 0: //do 0 stuff
        break

        case 1: //do 1 stuff
        break;

        case 2: //do 2 stuff
        break;
    }
});

Answer 2

你不需要jQuery用于if / elseif / else。你可以使用简单的Javascript：

我希望我没有错误。应该工作。

$("#noOfBankDetails").change(function(){
  var value = $(this).val();

  if(value == 0) {
    $("#firstBankDetail").show();
  }
  else if(value == 1) {
    $("#secondBankDetail").show();
  }
  else if(value == 2) {
    $("#thirdBankDetail").show();
    $("#fourthBankDetail").show();
  }
});

Answer 3

$("#noOfBankDetails").change(function () {
    if ($(this).val() == 0) {
        $("#firstBankDetail").hide();
        $("#secondBankDetail").hide();
        $("#thirdBankDetail").hide();
        $("#fourthBankDetail").hide();
        $("#secondBankDetail").hide();
        $("#thirdBankDetail").hide();
        $("#fourthBankDetail").hide();
    } else if ($(this).val() == 1) {
        $("#firstBankDetail").show();
    } else if ($(this).val() == 2) {
        $("#firstBankDetail").show();
        $("#secondBankDetail").show();
    } else if ($(this).val() == 3) {
        $("#firstBankDetail")..show();
        $("#secondBankDetail").show();
        $("#secondBankDetail").show();
    }
    //Continue the same logic below
    else if ($(this).val() == 4) {}
});

如何在jQuery中实现If ... else结构？

3 个答案: