0

I wish to display/hide elements based on the combination of the two select boxes. I've tried the following method when "values" was selected for eg. when we select the optional "in" and "spare" then that results is the "spare-in" id being shown.

<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>
Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88
Muhammad Irfan Efendi S
  • 11
  • 6

3 Answers3

0

Please try this.you can also try this with onchange event of your dropdown list rather than submit button.

$("#submit_btn").on("click",function(){
var data=$("#test1 option:selected").val();
var data1=$("#test2 option:selected").val();
if(data=="in" && data1=="spare")
{
$("#inspare").show();
}
});
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
Ricky
  • 488
  • 3
  • 14
0

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>

Tested and working check this.

Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
Nikunj Kathrotiya
  • 913
  • 7
  • 23
  • Why are you calling onchange 3 times instead of calling only once with the select element? – Syed mohamed aladeen May 13 '19 at 11:15
  • i don't understand your comment and why down vote my answer give me a proper reason @SyedMohamedAladeen – Nikunj Kathrotiya May 13 '19 at 11:18
  • see my answer I have done with just a single onchange. you have made 3 onchanges which is not required considering the load time. – Syed mohamed aladeen May 13 '19 at 11:20
  • @SyedMohamedAladeen you know different between id and class i think you not understand basic concept of id and class – Nikunj Kathrotiya May 13 '19 at 11:22
  • run your snippet and my snippet. then you will feel the run time difference. – Syed mohamed aladeen May 13 '19 at 11:22
  • your snippet is very slow and bed code for this question and you wasted my time see the different between id and class : https://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it @SyedMohamedAladeen – Nikunj Kathrotiya May 13 '19 at 11:25
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193254/discussion-between-syed-mohamed-aladeen-and-nikunj-kathrotiya). – Syed mohamed aladeen May 13 '19 at 11:27
  • @SyedMohamedAladeen what is the problem in my code please explain it. It's working fine – Nikunj Kathrotiya May 13 '19 at 12:23
  • $(document).ready(function(e) { $('select').on('change', function() { $("div").hide(); var test1value = $('#test1').val(); var test2value = $('#test2').val(); document.getElementById(test1value+" "+test2value).style.display = "block"; }); }); – Syed mohamed aladeen May 13 '19 at 12:48
  • something is wrong in your comment check again and why deleting your previous comments and you waste my and your time and your code is working on class base and user asked to id based and i don't understand why user accepting your answer @SyedMohamedAladeen – Nikunj Kathrotiya May 13 '19 at 12:55
-1

Try like this.

HTML will not allow you to add 2 id's. instead it will consider as single id even you have spaces between it.

so, in my solution I replaced your id with classes.

$("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>
Community
  • 1
  • 1
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59