选择下拉列表后，需要显示一些值，其余值需要隐藏

Question

当我选择下拉列表时，下面的函数正在正确执行，但我需要它更优化，任何1可以帮助我，因为选定的下拉列表带有更多的键。

$(".selcted").change(function () {
            var selectedEventType = this.options[this.selectedIndex].value;
            // alert(selectedEventType);
            if (selectedEventType == "expertise"){
                $('.fix').css("display", "block");
                $('.Nut').css("display", "block");
                $('.pra').css("display", "block");
                $('.res').css("display", "block");
                $('.equal').css("display", "block");
            } else if (selectedEventType == "equal") {
                $('.fix').css("display", "none");
                $('.Nut').css("display", "none");
                $('.pra').css("display", "none");
                $('.res').css("display", "none");
                $('.equal').css("display", "block");
            } else if (selectedEventType == "fix") {
                $('.equal').css("display", "none");
                $('.Nut').css("display", "none");
                $('.pra').css("display", "none");
                $('.res').css("display", "none");
                $('.fix').css("display", "block");
            } else if (selectedEventType == "Nut") {
                $('.equal').css("display", "none");
                $('.fix').css("display", "none");
                $('.pra').css("display", "none");
                $('.res').css("display", "none");
                $('.Nut').css("display", "block");
            } else if (selectedEventType == "pra") {
                $('.equal').css("display", "none");
                $('.fix').css("display", "none");
                $('.Nut').css("display", "none");
                $('.res').css("display", "none");
                $('.pra').css("display", "block");
            } else if (selectedEventType == "res") {
                $('.equal').css("display", "none");
                $('.fix').css("display", "none");
                $('.Nut').css("display", "none");
                $('.pra').css("display", "none");
                $('.res').css("display", "block");
            }
        });

选定的声明是这样的

 <select class="elect" >
                    <option value="<%= option.val %>">
                        <%= option.lab %>  //values will come into this
                    </option>
                    <% }); %>
                </select>

Answer 1

这应该按照您的预期工作

请注意，您有一些课程未命中比赛。你在代码中调用选择器拼写.selcted但你的html是class="elect"

$(".select").change(function() {
  var selectedEventType = $(this).val()
  console.log(selectedEventType)
  // alert(selectedEventType);
  if (selectedEventType == "expertise") {
    $('.fix').css("display", "block");
    $('.Nut').css("display", "block");
    $('.pra').css("display", "block");
    $('.res').css("display", "block");
    $('.equal').css("display", "block");
  } else {
    $('.fix').css("display", "none");
    $('.Nut').css("display", "none");
    $('.pra').css("display", "none");
    $('.res').css("display", "none");
    $('.equal').css("display", "none");
    $('.' + selectedEventType).css("display", "block");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
      <option value="expertise">expertise
      </option>
      <option value="equal">equal
      </option>
      <option value="fix">fix
      </option>
      <option value="Nut">Nut
      </option>
      <option value="pra">pra
      </option>
      <option value="res">res
      </option>
  </select>
  
  <div class="fix">fix</div>
  <div class="Nut">Nut</div>
  <div class="pra">pra</div>
  <div class="res">res</div>
  <div class="equal">equal</div>