Question

我有两个选择菜单，我正在尝试比较一个选定的值与另一个，但我无法使条件语句有效，请在下面的代码和jsFiddle中查看我的评论。

这是我的代码和jsFiddle：

#purpose选择菜单的预期值为“5”。 var selected是我尝试从#purpose选择菜单抓取该值。

$('#purpose').on('change', function() {
   if ( this.value == '8') {
      $("#business").show();
      $("#investor-type").hide();
   } else {
      $("#business").hide();
      $("#investor-type").show();
   }
});

var selected = $("#purpose option:selected", this).val();

$('#investor-type').on('change', function() {
   if ( this.value == '1') {
      $("#disclaimer-form").show();
      $(".disclaimer-content").show();
   // Having trouble with this else if below
   } else if ( this.value == "2" && selected == "5") {
      $("#disclaimer-form").show();
      $(".disclaimer-content").show();
   } else {
      $("#disclaimer-form").hide();
      $(".disclaimer-content").hide();
   }
});

Answer 1

1。在变更中移动选定的内容

$('#investor-type').on('change', function() { var selected = $("#purpose").val();

2。测试2里面的5

else if (this.value == "2") { $("#retailstatusyes").toggle(selected == "5"); $("#retailstatusno").toggle(selected != "5"); $("#prostatus").hide(); }

如果用户更改国家/地区，您还需要触发投资者类型的更改。

这是一个完整版本，具有更好的var名称，使用CSS初始隐藏

＆＃13;

$(function() {
  // This shows the next select menu
  $('#purpose').on('change', function() {
    var other = this.value == '8';
    $("#noaccess").toggle(other);
    $("#investor-type").toggle(!other);
    $('#investor-type').change();
  });

  $('#investor-type').on('change', function() {
    var selected = $("#purpose").val(),
    isDutch = selected == "5", 
    isPro = this.value == "1",
    isRetail = this.value == "2";
    $("#prostatus").toggle(isPro);
    if (isRetail) {
      $("#retailstatusyes").toggle(isDutch);
      $("#retailstatusno").toggle(!isDutch);
    } 
    else {
      $("#retailstatusyes").hide();
      $("#retailstatusno").hide();
    }
  });
});

＆＃13;

.invtype {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="purpose" class="left">
  <option value="0">Please choose a country</option>
  <option value="1">Austria</option>
  <option value="2">France</option>
  <option value="3">Germany</option>
  <option value="4">Italy</option>
  <option value="5">Netherlands</option>
  <option value="6">Spain</option>
  <option value="7">Switzerland</option>
  <option value="8">Other</option>
</select>

<select id="investor-type" class="left" style="display:none;">
  <option value="0">Investor Type</option>
  <option value="1">Professional Investor</option>
  <option value="2">Retail Investor</option>
</select>


<div class="invtype" id="noaccess">
  You have selected Other and thus you cannot access the next select menu. Soz.
</div>

<div class="invtype" id="prostatus">
  You are a pro investor
</div>

<div class="invtype" id="retailstatusno">
  You are a retail investor but NOT from the Netherlands
</div>

<div class="invtype" id="retailstatusyes">
  You are a retail investor AND you are from the Netherlands. Congrats.
</div>

＆＃13;

Answer 2

移动#investment-type的所选内部更改的分配。看看这个链接

// This shows the next select menu
$('#purpose').on('change', function() {
 if ( this.value == '8') {
  $("#noaccess").show();
  $("#investor-type").hide();

  $("#prostatus").hide();
  $("#retailstatusyes").hide();
  $("#retailstatusno").hide();
} else {
  $("#noaccess").hide();
  $("#investor-type").show();
  $("#prostatus").hide();
  $("#retailstatusyes").hide();
  $("#retailstatusno").hide();
}
});

// Grab value from previous select menu for comparison
$('#investor-type').on('change', function() {
var selected = $("#purpose option:selected").val();
console.log(selected+" "+this.value);
if ( this.value == '1') {
  $("#prostatus").show();
} else if ( this.value == "2") {
 $("#retailstatusno").show();
 $("#prostatus").hide();
// Not working. Show specific success div if the current value is 2 and value from previous select is 5
} else if ( this.value == "2" && selected == "5") {
  $("#retailstatusyes").show();
  $("#prostatus").hide();
} else {
  $("#noaccess").hide();
  $("#prostatus").hide();
  $("#retailstatusyes").hide();
  $("#retailstatusno").hide();
}
});

https://jsfiddle.net/Lvbj2dmm/9/

Answer 3

首先，您需要将selected的评估移动到事件处理程序中以获取最新值：

$('#investor-type').on('change', function() {
    var selected = $("#purpose option:selected").val();

    // ...
}

其次，else if的顺序错误，因为第一个(this.value == "2")会使下一个(this.value == "2" && selected == "5")无用。尝试改变他们的顺序，以便最具体的一个首先出现：

if (this.value == '1') {
  $("#prostatus").show();
} else if (this.value == "2" && selected == "5") {
  $("#retailstatusyes").show();
  $("#prostatus").hide();
} else if (this.value == "2") {
  $("#retailstatusno").show();
  $("#prostatus").hide();
} else {
  $("#noaccess").hide();
  $("#prostatus").hide();
  $("#retailstatusyes").hide();
  $("#retailstatusno").hide();
}

请参见修改后的Fiddle

如果语句jQuery有多个选择值

3 个答案: