Jquery change div depending on options









up vote
1
down vote

favorite












I’m building a basic module, for a fictional toy store.



Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.



I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...



This is the option I had to change:



<option value="BigTruck">Big Truck</option> <--- works if i take the space out

<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended


I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...



I have tried "hypothetically" adding a &nbsp; instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...



http://jsfiddle.net/baddog04061980/wtm1dLs2 






$(document).ready(function() 
 $('.choice-boxs').hide();
 $('#Car12').show();
 $("#option-kit, #option-parts").on("change", function() 
 $('.choice-boxs').hide();
 $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">

 <div class="selector-wrapper cf">
 <label for="option-kit">
 Kit
 </label>
 <select id="option-kit">

 <option value="Car" selected="">Car</option>
 <option value="Truck">Truck</option>
 <option value="Big Truck">Big Truck</option>

 </select>
 </div>

 <div class="selector-wrapper cf">
 <label for="option-parts">
 Parts
 </label>
 <select id="option-parts">

 <option value="12" selected="">
 12
 </option>

 <option value="18">
 18
 </option>

 <option value="24">
 24
 </option>

 <option value="30">
 30
 </option>

 <option value="36">
 36
 </option>

 </select>
 </div>



</div>


<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


<!-- Deluxe -->

<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

<!-- Deluxe -->

<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








jquery option







share|improve this question



























    up vote
    1
    down vote

    favorite












    I’m building a basic module, for a fictional toy store.



    Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.



    I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...



    This is the option I had to change:



    <option value="BigTruck">Big Truck</option> <--- works if i take the space out

    <option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended


    I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...



    I have tried "hypothetically" adding a &nbsp; instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...



    http://jsfiddle.net/baddog04061980/wtm1dLs2 






    $(document).ready(function() 
     $('.choice-boxs').hide();
     $('#Car12').show();
     $("#option-kit, #option-parts").on("change", function() 
     $('.choice-boxs').hide();
     $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
     );
    );

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="option-selectors">

     <div class="selector-wrapper cf">
     <label for="option-kit">
     Kit
     </label>
     <select id="option-kit">

     <option value="Car" selected="">Car</option>
     <option value="Truck">Truck</option>
     <option value="Big Truck">Big Truck</option>

     </select>
     </div>

     <div class="selector-wrapper cf">
     <label for="option-parts">
     Parts
     </label>
     <select id="option-parts">

     <option value="12" selected="">
     12
     </option>

     <option value="18">
     18
     </option>

     <option value="24">
     24
     </option>

     <option value="30">
     30
     </option>

     <option value="36">
     36
     </option>

     </select>
     </div>



    </div>


    <!-- Basic -->
    <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
    <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
    <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
    <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
    <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


    <!-- Deluxe -->

    <div id="Truck12" class="choice-boxs">Truck and 12 Parts
    </div>
    <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
    <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
    <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
    <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

    <!-- Deluxe -->

    <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
    <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
    <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
    <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
    <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








    jquery option







    share|improve this question

























      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite











      I’m building a basic module, for a fictional toy store.



      Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.



      I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...



      This is the option I had to change:



      <option value="BigTruck">Big Truck</option> <--- works if i take the space out

      <option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended


      I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...



      I have tried "hypothetically" adding a &nbsp; instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...



      http://jsfiddle.net/baddog04061980/wtm1dLs2 






      $(document).ready(function() 
       $('.choice-boxs').hide();
       $('#Car12').show();
       $("#option-kit, #option-parts").on("change", function() 
       $('.choice-boxs').hide();
       $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
       );
      );

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <div class="option-selectors">

       <div class="selector-wrapper cf">
       <label for="option-kit">
       Kit
       </label>
       <select id="option-kit">

       <option value="Car" selected="">Car</option>
       <option value="Truck">Truck</option>
       <option value="Big Truck">Big Truck</option>

       </select>
       </div>

       <div class="selector-wrapper cf">
       <label for="option-parts">
       Parts
       </label>
       <select id="option-parts">

       <option value="12" selected="">
       12
       </option>

       <option value="18">
       18
       </option>

       <option value="24">
       24
       </option>

       <option value="30">
       30
       </option>

       <option value="36">
       36
       </option>

       </select>
       </div>



      </div>


      <!-- Basic -->
      <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
      <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
      <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
      <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
      <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


      <!-- Deluxe -->

      <div id="Truck12" class="choice-boxs">Truck and 12 Parts
      </div>
      <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
      <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
      <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
      <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

      <!-- Deluxe -->

      <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
      <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
      <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
      <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
      <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








      jquery option







      share|improve this question















      I’m building a basic module, for a fictional toy store.



      Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.



      I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...



      This is the option I had to change:



      <option value="BigTruck">Big Truck</option> <--- works if i take the space out

      <option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended


      I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...



      I have tried "hypothetically" adding a &nbsp; instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...



      http://jsfiddle.net/baddog04061980/wtm1dLs2 






      $(document).ready(function() 
       $('.choice-boxs').hide();
       $('#Car12').show();
       $("#option-kit, #option-parts").on("change", function() 
       $('.choice-boxs').hide();
       $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
       );
      );

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <div class="option-selectors">

       <div class="selector-wrapper cf">
       <label for="option-kit">
       Kit
       </label>
       <select id="option-kit">

       <option value="Car" selected="">Car</option>
       <option value="Truck">Truck</option>
       <option value="Big Truck">Big Truck</option>

       </select>
       </div>

       <div class="selector-wrapper cf">
       <label for="option-parts">
       Parts
       </label>
       <select id="option-parts">

       <option value="12" selected="">
       12
       </option>

       <option value="18">
       18
       </option>

       <option value="24">
       24
       </option>

       <option value="30">
       30
       </option>

       <option value="36">
       36
       </option>

       </select>
       </div>



      </div>


      <!-- Basic -->
      <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
      <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
      <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
      <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
      <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


      <!-- Deluxe -->

      <div id="Truck12" class="choice-boxs">Truck and 12 Parts
      </div>
      <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
      <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
      <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
      <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

      <!-- Deluxe -->

      <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
      <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
      <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
      <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
      <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








      $(document).ready(function() 
       $('.choice-boxs').hide();
       $('#Car12').show();
       $("#option-kit, #option-parts").on("change", function() 
       $('.choice-boxs').hide();
       $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
       );
      );

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <div class="option-selectors">

       <div class="selector-wrapper cf">
       <label for="option-kit">
       Kit
       </label>
       <select id="option-kit">

       <option value="Car" selected="">Car</option>
       <option value="Truck">Truck</option>
       <option value="Big Truck">Big Truck</option>

       </select>
       </div>

       <div class="selector-wrapper cf">
       <label for="option-parts">
       Parts
       </label>
       <select id="option-parts">

       <option value="12" selected="">
       12
       </option>

       <option value="18">
       18
       </option>

       <option value="24">
       24
       </option>

       <option value="30">
       30
       </option>

       <option value="36">
       36
       </option>

       </select>
       </div>



      </div>


      <!-- Basic -->
      <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
      <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
      <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
      <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
      <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


      <!-- Deluxe -->

      <div id="Truck12" class="choice-boxs">Truck and 12 Parts
      </div>
      <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
      <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
      <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
      <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

      <!-- Deluxe -->

      <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
      <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
      <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
      <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
      <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>





      $(document).ready(function() 
       $('.choice-boxs').hide();
       $('#Car12').show();
       $("#option-kit, #option-parts").on("change", function() 
       $('.choice-boxs').hide();
       $('#' + $('#option-kit').val() + $('#option-parts').val()).show();
       );
      );

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <div class="option-selectors">

       <div class="selector-wrapper cf">
       <label for="option-kit">
       Kit
       </label>
       <select id="option-kit">

       <option value="Car" selected="">Car</option>
       <option value="Truck">Truck</option>
       <option value="Big Truck">Big Truck</option>

       </select>
       </div>

       <div class="selector-wrapper cf">
       <label for="option-parts">
       Parts
       </label>
       <select id="option-parts">

       <option value="12" selected="">
       12
       </option>

       <option value="18">
       18
       </option>

       <option value="24">
       24
       </option>

       <option value="30">
       30
       </option>

       <option value="36">
       36
       </option>

       </select>
       </div>



      </div>


      <!-- Basic -->
      <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
      <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
      <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
      <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
      <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


      <!-- Deluxe -->

      <div id="Truck12" class="choice-boxs">Truck and 12 Parts
      </div>
      <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
      <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
      <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
      <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

      <!-- Deluxe -->

      <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
      <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
      <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
      <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
      <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>





      jquery option




      jquery option






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 11 at 11:16









      mplungjan

      86k20120180




      86k20120180










      asked Nov 11 at 11:12









      Justin Brown

      435




      435






















          3 Answers
          3






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          Your option BigTruck has white spaces.



          • It's not recommended use id whith white spaces

          But if you want resolve this problem, without made id changes, you can replace white spaces:



          $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();


          • Live example http://jsfiddle.net/c2f3uq17/1/

          Your snippet whit the changes:






          $(document).ready(function() 
           $('.choice-boxs').hide();
           $('#Car12').show();
           $("#option-kit, #option-parts").on("change", function() 
           $('.choice-boxs').hide();
           $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
           );
          );

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

          <div class="option-selectors">
           <div class="selector-wrapper cf">
           <label for="option-kit"> Kit</label>
           <select id="option-kit">
           <option value="Car" selected="">Car</option>
           <option value="Truck">Truck</option>
           <option value="Big Truck">Big Truck</option>
           </select>
           </div>
           <div class="selector-wrapper cf">
           <label for="option-parts">Parts</label>
           <select id="option-parts">
           <option value="12" selected="">12</option>
           <option value="18">18</option>
           <option value="24">24</option>
           <option value="30">30</option>
           <option value="36">36</option>
           </select>
           </div>
          </div>

          <!-- Basic -->
          <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
          <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
          <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
          <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
          <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

          <!-- Deluxe -->
          <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
          <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
          <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
          <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
          <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

          <!-- Deluxe -->
          <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
          <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
          <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
          <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
          <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








          share|improve this answer




















          • Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
            – Justin Brown
            Nov 12 at 3:07










          • @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
            – mplungjan
            Nov 12 at 17:52


















          up vote
          0
          down vote













          Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?



          It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.



          Ways to get the element anyway:



          • Use the id attribute: $('[id="'+idWithSpaces+'"]')

          • escape the spaces: id = id.replace(/ /g,"\ ");

          • Use DOM document.getElementById(id);




          $(document).ready(function() 
           $('.choice-boxs').hide();
           $('#Car12').show();
           $("#option-kit, #option-parts").on("change", function() 
           $('.choice-boxs').hide();
           var id = $('#option-kit').val() + $('#option-parts').val();
           id = id.replace(/ /g,"\ ");
           $('#'+id).show();
           // $('[id="' + id + '"]').show();
           );
          );

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
          <div class="option-selectors">
           <div class="selector-wrapper cf">
           <label for="option-kit">Kit</label>
           <select id="option-kit">
           <option value="Car" selected="">Car</option>
           <option value="Truck">Truck</option>
           <option value="Big Truck">Big Truck</option>
           </select>
           </div>

           <div class="selector-wrapper cf">
           <label for="option-parts">Parts</label>
           <select id="option-parts">
           <option value="12" selected="">12</option>
           <option value="18">18</option>
           <option value="24">24</option>
           <option value="30">30</option>
           <option value="36">36</option>
           </select>
           </div>
          </div>

          <!-- Basic -->
          <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
          <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
          <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
          <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
          <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


          <!-- Deluxe -->

          <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
          <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
          <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
          <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
          <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

          <!-- Deluxe -->

          <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
          <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
          <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
          <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
          <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>








          share|improve this answer





























            up vote
            -1
            down vote













            id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.






            share|improve this answer






















            • Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
              – mplungjan
              Nov 11 at 11:38











            • Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
              – jonasdev
              Nov 11 at 12:23










            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248137%2fjquery-change-div-depending-on-options%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote



            accepted










            Your option BigTruck has white spaces.



            • It's not recommended use id whith white spaces

            But if you want resolve this problem, without made id changes, you can replace white spaces:



            $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();


            • Live example http://jsfiddle.net/c2f3uq17/1/

            Your snippet whit the changes:






            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








            share|improve this answer




















            • Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
              – Justin Brown
              Nov 12 at 3:07










            • @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
              – mplungjan
              Nov 12 at 17:52















            up vote
            0
            down vote



            accepted










            Your option BigTruck has white spaces.



            • It's not recommended use id whith white spaces

            But if you want resolve this problem, without made id changes, you can replace white spaces:



            $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();


            • Live example http://jsfiddle.net/c2f3uq17/1/

            Your snippet whit the changes:






            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








            share|improve this answer




















            • Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
              – Justin Brown
              Nov 12 at 3:07










            • @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
              – mplungjan
              Nov 12 at 17:52













            up vote
            0
            down vote



            accepted







            up vote
            0
            down vote



            accepted






            Your option BigTruck has white spaces.



            • It's not recommended use id whith white spaces

            But if you want resolve this problem, without made id changes, you can replace white spaces:



            $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();


            • Live example http://jsfiddle.net/c2f3uq17/1/

            Your snippet whit the changes:






            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








            share|improve this answer












            Your option BigTruck has white spaces.



            • It's not recommended use id whith white spaces

            But if you want resolve this problem, without made id changes, you can replace white spaces:



            $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();


            • Live example http://jsfiddle.net/c2f3uq17/1/

            Your snippet whit the changes:






            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>








            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>





            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             $('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit"> Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>
             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>

            <!-- Deluxe -->
            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->
            <div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 11 at 11:38









            ℛɑƒæĿ

            99721125




            99721125











            • Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
              – Justin Brown
              Nov 12 at 3:07










            • @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
              – mplungjan
              Nov 12 at 17:52

















            • Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
              – Justin Brown
              Nov 12 at 3:07










            • @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
              – mplungjan
              Nov 12 at 17:52
















            Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
            – Justin Brown
            Nov 12 at 3:07




            Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
            – Justin Brown
            Nov 12 at 3:07












            @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
            – mplungjan
            Nov 12 at 17:52





            @JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
            – mplungjan
            Nov 12 at 17:52













            up vote
            0
            down vote













            Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?



            It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.



            Ways to get the element anyway:



            • Use the id attribute: $('[id="'+idWithSpaces+'"]')

            • escape the spaces: id = id.replace(/ /g,"\ ");

            • Use DOM document.getElementById(id);




            $(document).ready(function() 
             $('.choice-boxs').hide();
             $('#Car12').show();
             $("#option-kit, #option-parts").on("change", function() 
             $('.choice-boxs').hide();
             var id = $('#option-kit').val() + $('#option-parts').val();
             id = id.replace(/ /g,"\ ");
             $('#'+id).show();
             // $('[id="' + id + '"]').show();
             );
            );

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <div class="option-selectors">
             <div class="selector-wrapper cf">
             <label for="option-kit">Kit</label>
             <select id="option-kit">
             <option value="Car" selected="">Car</option>
             <option value="Truck">Truck</option>
             <option value="Big Truck">Big Truck</option>
             </select>
             </div>

             <div class="selector-wrapper cf">
             <label for="option-parts">Parts</label>
             <select id="option-parts">
             <option value="12" selected="">12</option>
             <option value="18">18</option>
             <option value="24">24</option>
             <option value="30">30</option>
             <option value="36">36</option>
             </select>
             </div>
            </div>

            <!-- Basic -->
            <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
            <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
            <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
            <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
            <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


            <!-- Deluxe -->

            <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
            <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
            <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
            <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
            <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

            <!-- Deluxe -->

            <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
            <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
            <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
            <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
            <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>








            share|improve this answer


























              up vote
              0
              down vote













              Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?



              It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.



              Ways to get the element anyway:



              • Use the id attribute: $('[id="'+idWithSpaces+'"]')

              • escape the spaces: id = id.replace(/ /g,"\ ");

              • Use DOM document.getElementById(id);




              $(document).ready(function() 
               $('.choice-boxs').hide();
               $('#Car12').show();
               $("#option-kit, #option-parts").on("change", function() 
               $('.choice-boxs').hide();
               var id = $('#option-kit').val() + $('#option-parts').val();
               id = id.replace(/ /g,"\ ");
               $('#'+id).show();
               // $('[id="' + id + '"]').show();
               );
              );

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
              <div class="option-selectors">
               <div class="selector-wrapper cf">
               <label for="option-kit">Kit</label>
               <select id="option-kit">
               <option value="Car" selected="">Car</option>
               <option value="Truck">Truck</option>
               <option value="Big Truck">Big Truck</option>
               </select>
               </div>

               <div class="selector-wrapper cf">
               <label for="option-parts">Parts</label>
               <select id="option-parts">
               <option value="12" selected="">12</option>
               <option value="18">18</option>
               <option value="24">24</option>
               <option value="30">30</option>
               <option value="36">36</option>
               </select>
               </div>
              </div>

              <!-- Basic -->
              <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
              <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
              <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
              <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
              <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


              <!-- Deluxe -->

              <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
              <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
              <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
              <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
              <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

              <!-- Deluxe -->

              <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
              <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
              <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
              <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
              <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>








              share|improve this answer
























                up vote
                0
                down vote










                up vote
                0
                down vote









                Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?



                It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.



                Ways to get the element anyway:



                • Use the id attribute: $('[id="'+idWithSpaces+'"]')

                • escape the spaces: id = id.replace(/ /g,"\ ");

                • Use DOM document.getElementById(id);




                $(document).ready(function() 
                 $('.choice-boxs').hide();
                 $('#Car12').show();
                 $("#option-kit, #option-parts").on("change", function() 
                 $('.choice-boxs').hide();
                 var id = $('#option-kit').val() + $('#option-parts').val();
                 id = id.replace(/ /g,"\ ");
                 $('#'+id).show();
                 // $('[id="' + id + '"]').show();
                 );
                );

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <div class="option-selectors">
                 <div class="selector-wrapper cf">
                 <label for="option-kit">Kit</label>
                 <select id="option-kit">
                 <option value="Car" selected="">Car</option>
                 <option value="Truck">Truck</option>
                 <option value="Big Truck">Big Truck</option>
                 </select>
                 </div>

                 <div class="selector-wrapper cf">
                 <label for="option-parts">Parts</label>
                 <select id="option-parts">
                 <option value="12" selected="">12</option>
                 <option value="18">18</option>
                 <option value="24">24</option>
                 <option value="30">30</option>
                 <option value="36">36</option>
                 </select>
                 </div>
                </div>

                <!-- Basic -->
                <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
                <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
                <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
                <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
                <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


                <!-- Deluxe -->

                <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
                <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
                <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
                <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
                <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

                <!-- Deluxe -->

                <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
                <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
                <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
                <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
                <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>








                share|improve this answer














                Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?



                It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.



                Ways to get the element anyway:



                • Use the id attribute: $('[id="'+idWithSpaces+'"]')

                • escape the spaces: id = id.replace(/ /g,"\ ");

                • Use DOM document.getElementById(id);




                $(document).ready(function() 
                 $('.choice-boxs').hide();
                 $('#Car12').show();
                 $("#option-kit, #option-parts").on("change", function() 
                 $('.choice-boxs').hide();
                 var id = $('#option-kit').val() + $('#option-parts').val();
                 id = id.replace(/ /g,"\ ");
                 $('#'+id).show();
                 // $('[id="' + id + '"]').show();
                 );
                );

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <div class="option-selectors">
                 <div class="selector-wrapper cf">
                 <label for="option-kit">Kit</label>
                 <select id="option-kit">
                 <option value="Car" selected="">Car</option>
                 <option value="Truck">Truck</option>
                 <option value="Big Truck">Big Truck</option>
                 </select>
                 </div>

                 <div class="selector-wrapper cf">
                 <label for="option-parts">Parts</label>
                 <select id="option-parts">
                 <option value="12" selected="">12</option>
                 <option value="18">18</option>
                 <option value="24">24</option>
                 <option value="30">30</option>
                 <option value="36">36</option>
                 </select>
                 </div>
                </div>

                <!-- Basic -->
                <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
                <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
                <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
                <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
                <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


                <!-- Deluxe -->

                <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
                <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
                <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
                <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
                <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

                <!-- Deluxe -->

                <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
                <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
                <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
                <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
                <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>








                $(document).ready(function() 
                 $('.choice-boxs').hide();
                 $('#Car12').show();
                 $("#option-kit, #option-parts").on("change", function() 
                 $('.choice-boxs').hide();
                 var id = $('#option-kit').val() + $('#option-parts').val();
                 id = id.replace(/ /g,"\ ");
                 $('#'+id).show();
                 // $('[id="' + id + '"]').show();
                 );
                );

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <div class="option-selectors">
                 <div class="selector-wrapper cf">
                 <label for="option-kit">Kit</label>
                 <select id="option-kit">
                 <option value="Car" selected="">Car</option>
                 <option value="Truck">Truck</option>
                 <option value="Big Truck">Big Truck</option>
                 </select>
                 </div>

                 <div class="selector-wrapper cf">
                 <label for="option-parts">Parts</label>
                 <select id="option-parts">
                 <option value="12" selected="">12</option>
                 <option value="18">18</option>
                 <option value="24">24</option>
                 <option value="30">30</option>
                 <option value="36">36</option>
                 </select>
                 </div>
                </div>

                <!-- Basic -->
                <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
                <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
                <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
                <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
                <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


                <!-- Deluxe -->

                <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
                <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
                <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
                <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
                <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

                <!-- Deluxe -->

                <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
                <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
                <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
                <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
                <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>





                $(document).ready(function() 
                 $('.choice-boxs').hide();
                 $('#Car12').show();
                 $("#option-kit, #option-parts").on("change", function() 
                 $('.choice-boxs').hide();
                 var id = $('#option-kit').val() + $('#option-parts').val();
                 id = id.replace(/ /g,"\ ");
                 $('#'+id).show();
                 // $('[id="' + id + '"]').show();
                 );
                );

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <div class="option-selectors">
                 <div class="selector-wrapper cf">
                 <label for="option-kit">Kit</label>
                 <select id="option-kit">
                 <option value="Car" selected="">Car</option>
                 <option value="Truck">Truck</option>
                 <option value="Big Truck">Big Truck</option>
                 </select>
                 </div>

                 <div class="selector-wrapper cf">
                 <label for="option-parts">Parts</label>
                 <select id="option-parts">
                 <option value="12" selected="">12</option>
                 <option value="18">18</option>
                 <option value="24">24</option>
                 <option value="30">30</option>
                 <option value="36">36</option>
                 </select>
                 </div>
                </div>

                <!-- Basic -->
                <div id="Car12" class="choice-boxs">Car and 12 Parts</div>
                <div id="Car18" class="choice-boxs">Car and 18 Parts</div>
                <div id="Car24" class="choice-boxs">Car and 24 Parts</div>
                <div id="Car30" class="choice-boxs">Car and 30 Parts</div>
                <div id="Car36" class="choice-boxs">Car and 3 Parts6</div>


                <!-- Deluxe -->

                <div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
                <div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
                <div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
                <div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
                <div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>

                <!-- Deluxe -->

                <div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
                <div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
                <div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
                <div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
                <div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 11 at 13:09

























                answered Nov 11 at 11:23









                mplungjan

                86k20120180




                86k20120180




















                    up vote
                    -1
                    down vote













                    id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.






                    share|improve this answer






















                    • Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                      – mplungjan
                      Nov 11 at 11:38











                    • Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                      – jonasdev
                      Nov 11 at 12:23














                    up vote
                    -1
                    down vote













                    id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.






                    share|improve this answer






















                    • Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                      – mplungjan
                      Nov 11 at 11:38











                    • Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                      – jonasdev
                      Nov 11 at 12:23












                    up vote
                    -1
                    down vote










                    up vote
                    -1
                    down vote









                    id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.






                    share|improve this answer














                    id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Nov 11 at 11:32









                    Zoe

                    10.6k73575




                    10.6k73575










                    answered Nov 11 at 11:31









                    jonasdev

                    664




                    664











                    • Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                      – mplungjan
                      Nov 11 at 11:38











                    • Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                      – jonasdev
                      Nov 11 at 12:23
















                    • Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                      – mplungjan
                      Nov 11 at 11:38











                    • Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                      – jonasdev
                      Nov 11 at 12:23















                    Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                    – mplungjan
                    Nov 11 at 11:38





                    Yes they can, but the selector cannot use $("#something with spaces") it needs to be $("#something\ with\ spaces")
                    – mplungjan
                    Nov 11 at 11:38













                    Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                    – jonasdev
                    Nov 11 at 12:23




                    Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
                    – jonasdev
                    Nov 11 at 12:23

















                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248137%2fjquery-change-div-depending-on-options%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    這個網誌中的熱門文章

                    How to read a connectionString WITH PROVIDER in .NET Core?

                    圖片
                    6 I added .AddJsonFile("Connections.json", optional: true, reloadOnChange: true) in public Startup(IHostingEnvironment env) Connections.json contains: "ConnectionStrings": "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=DATABASE;Trusted_Connection=True;MultipleActiveResultSets=true", "COR-W81-101": "Data Source=DATASOURCE;Initial Catalog=P61_CAFM_Basic;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "COR-W81-100": "Data Source=DATASOURCE;Initial Catalog=Post_PS;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "MSEDGEWIN10": "Data Source=DATASOURCE; Initial Catalog=COR_Basic; Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Packet Size=4096;Application Name="COR_Basic"", "server...
                    閱讀完整內容

                    Node.js Script on GitHub Pages or Amazon S3

                    圖片
                    0 I'm wondering if I can run a Node.js script in my Jekyll page from GitHub Pages or Amazon S3? I think it can't run on GitHub Pages since it doesn't support server side code. Not too sure. The code is below: var Airtable = require('airtable'); var base = new Airtable(apiKey: 'YOUR_API_KEY').base('appAnZVyYqusNPV5Q'); base('Invitee list').select( // Selecting the first 3 records in Complete list: maxRecords: 3, view: "Complete list" ).eachPage(function page(records, fetchNextPage) // This function (`page`) will get called for each page of records. records.forEach(function(record) console.log('Retrieved', record.get('Email')); ); // To fetch the next page of records, call `fetchNextPage`. // If there are more records, `page` will get called again. // If there are no more records, `done` will get called. fetchNextPage(); , function done(err) if (err) console.error(err); return; ); node.js ...
                    閱讀完整內容

                    Museum of Modern and Contemporary Art of Trento and Rovereto

                    圖片
                    Art museum in Rovereto TN, Italy Museum of Modern and Contemporary Art of Trento and Rovereto Museo d'arte moderna e contemporanea di Trento e Rovereto MART, Entrance Location Corso Angelo Bettini, 43, 38068 Rovereto TN, Italy Coordinates 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Coordinates: 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Type Art museum Director Gianfranco Maraniello Public transit access Trento train station. Taxis outside station. Website mart.trento.it The Museum of Modern and Contemporary Art of Trento and Rovereto (MART) ( Museo d'Arte Moderna e Contemporanea di Trento e Rovereto , in Italian) is a museum centre in the Italian province of Trento. The main site is in Rovereto, and contains mostly modern and contemporary artworks, including works from renowned Giorgio Morandi, Giorgio de...
                    閱讀完整內容