javascript - 多选值 if 语句 jQuery

Question

我有 2 个选择菜单，我正在尝试将其中一个的选定值与另一个进行比较，但我无法使条件语句正常工作，请在下面的代码和 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();
}

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

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

$(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();
    }
  });
});

.invtype {
  display: none
}

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