根据JavaScript中的两个选项条件显示/隐藏div

Question

我希望基于两个选择框的组合来显示/隐藏元素。例如，当选择“值”时，我尝试了以下方法。当我们选择可选的“ in”和“ spare”时，结果是显示“ spare-in” id。

<select id="test1">
  <option value="in">in</option>
  <option value="out">out</option>
</select>

<select id="test2">
  <option value="spare">Spare</option>
  <option value="faulty">Faulty</option>
  <option value="rma">RMA</option>
</select>

<div id="in spare" >
   spare-in id is ...
</div>
<div id="in faulty" >
   rma-in id is ...
</div>
<div id="out spare" >
   spare-out id is ...
</div>
<div id="out rma" >
   rma-out id is ...
</div>

Answer 1

请尝试此操作。您也可以通过下拉列表的onchange事件尝试此操作，而不是提交按钮。

$("#submit_btn").on("click",function(){
var data=$("#test1 option:selected").val();
var data1=$("#test2 option:selected").val();
if(data=="in" && data1=="spare")
{
$("#inspare").show();
}
});

Answer 2

尝试这样。

  

HTML不允许您添加2个ID。相反，即使它们之间有空格，它也将被视为单个ID。

     

所以，在我的解决方案中，我用类替换了您的ID。

$("select").change(function(){
  var test1 = $("#test1").val();
  var test2 = $("#test2").val();
  $(".in, .out").hide();
  $("."+test1+"."+test2).show();
  
});

.spare,.faulty,.rma {
  display: none
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test1">
  <option value="in">in</option>
  <option value="out">out</option>
</select>

<select id="test2">
  <option value="spare">Spare</option>
  <option value="faulty">Faulty</option>
  <option value="rma">RMA</option>
</select>

<div class="in spare" >
   spare-in id is ...
</div>
<div class="in faulty" >
   faulty-in id is ...
</div>
<div class="in rma" >
   rma-in id is ...
</div>
<div class="out spare" >
   spare-out id is ...
</div>
<div class="out faulty" >
   faulty-out id is ...
</div>
<div class="out rma" >
   rma-out id is ...
</div>

Answer 3

function onchnagefunction()
{
  var test1value = $('#test1').val();
  var test2value = $('#test2').val();
  document.getElementById(test1value+" "+test2value).style.display = "block";
}

$(document).ready(function(e) {
    $("div").hide();
    onchnagefunction();
    $('#test1').on('change', function() {
        $("div").hide();
       onchnagefunction();
    });
    $('#test2').on('change', function() {
        $("div").hide();
       onchnagefunction();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="test1">
      <option value="in">in</option>
      <option value="out">out</option>
    </select>

    <select id="test2">
      <option value="spare">Spare</option>
      <option value="faulty">Faulty</option>
      <option value="rma">RMA</option>
    </select>

    <div id="in spare">
       spare-in id is ...
    </div>
    <div id="in faulty" >
       rma-in id is ...
    </div>
    <div id="out spare" >
       spare-out id is ...
    </div>
    <div id="out rma" >
       rma-out id is ...
    </div>

经过测试，可以正常进行检查。